Master Frontend Tooling: Prettier, Stylelint, ESLint, and Git Hooks for Design Systems

Introduction

In the 1960s the "software crisis" emerged as computers outpaced software development. Fifty years later a similar challenge appears in design, where UI components become inconsistent and hard to maintain. A design system—a collection of reusable, standardised components—solves this problem.

GrowingIO's product R&D team built the GrowingIO Design System to provide consistent interaction experiences and improve development efficiency. This article introduces the development tools used to build the component library.

TL;DR

The tools are divided into two categories: code formatting tools and code management tools.

1. Code Formatting Tools

Prettier : opinionated code formatter supporting JavaScript, JSX, TypeScript, CSS, Less, SCSS, HTML, JSON, GraphQL, Markdown, YAML, etc.

stylelint : modern CSS/SCSS/LESS linter with over 170 built‑in rules, plugin support, and auto‑fix capabilities.

ESLint : pluggable JavaScript linter that parses code with Espree, analyses AST patterns, and allows custom rule plugins.

2. Code Management Tools

Commitizen : assists developers in writing conventional commit messages.

commitlint : validates commit messages against a configurable convention.

lint‑staged : runs linters only on staged files to speed up checks.

husky : integrates all the above tools into Git hooks (pre‑commit, commit‑msg, etc.).

Tool Details

Prettier

Prettier formats code according to a consistent style, handling line length and language‑specific syntax. $ yarn add --dev --exact prettier Configuration example:

$ echo {}> .prettierrc.js

$ yarn prettier --write .

stylelint

stylelint enforces CSS/LESS/SCSS style rules and can be combined with Prettier.

$ yarn add --dev stylelint stylelint-config-standard stylelint-config-prettier

module.exports = {</code><code>  extends: ["stylelint-config-standard", "stylelint-config-prettier"],</code><code>};

$ npx stylelint --syntax less --fix

ESLint

ESLint checks JavaScript/TypeScript code for errors and style violations.

$ yarn add --dev eslint

$ npx eslint --init

module.exports = {</code><code>  env: {browser: true, es2021: true, jest: true},</code><code>  extends: ["plugin:react/recommended", "airbnb", "prettier", "prettier/react"],</code><code>  parser: "@typescript-eslint/parser",</code><code>  plugins: ["react", "@typescript-eslint", "prettier"],</code><code>  rules: {"prettier/prettier": "error"},</code><code>};

$ npx eslint --cache --fix

Commitizen

$ yarn global add commitizen

$ commitizen init cz-conventional-changelog --yarn --dev --exact

commitlint

$ yarn add --dev @commitlint/config-conventional @commitlint/cli

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > .commitlintrc.js

lint‑staged

$ npx mrm lint-staged

module.exports = {</code><code>  "**/*": "prettier --write --ignore-unknown",</code><code>  "*.less": "stylelint --syntax less --fix",</code><code>  "*.(j|t)s?(x)": "eslint --cache --fix",</code><code>};

husky

$ yarn add --dev husky

module.exports = {</code><code>  hooks: {</code><code>    "pre-commit": "lint-staged",</code><code>    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",</code><code>  },</code><code>};

Running git cz now triggers the configured hooks, ensuring formatted code and valid commit messages.

CI Integration

The tools are integrated into a GitHub Actions workflow, which runs the checks on each push and annotates the results directly in the pull request.

CI visualisation:

Conclusion

The article introduced the motivation behind a design system and provided a comprehensive reference of the frontend tooling—Prettier, stylelint, ESLint, Commitizen, commitlint, lint‑staged, and Husky—used to build and maintain a robust component library.