Streamline Frontend Development with Husky, lint‑staged, ESLint, and Prettier

Introduction

Developers often struggle with inconsistent code style, syntax errors, unclear commit messages, and chaotic monorepo commits, which can be alleviated by automating checks and formatting.

Background

Frontend engineering has moved beyond plain JavaScript and jQuery to modular, engineered workflows. This article records a personal exploration of basic frontend engineering practices using React and TypeScript.

Git Hooks with Husky

Husky runs commands in Git hooks, enabling automatic linting, testing, or building before commits or pushes.

Installation:

# npm
npx husky-init && npm install

# yarn
yarn dlx husky-init --yarn2 && yarn

# pnpm
pnpm dlx husky-init && pnpm install

File Filtering with lint‑staged

lint‑staged runs specified commands only on staged files, ensuring code quality before committing.

Installation:

# npm
npm install lint-staged --save-dev

# yarn
yarn add lint-staged --dev

# pnpm
pnpm add lint-staged --save-dev

Example package.json configuration:

{
  "scripts": {
    "lint": "eslint src"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }
}

Pre‑commit hook script:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

Commit Message Standards with commitlint

commitlint enforces a unified commit message format.

Installation:

# npm
npm install @commitlint/cli @commitlint/config-conventional --save-dev

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

# pnpm
pnpm add @commitlint/cli @commitlint/config-conventional --save-dev

Add a commit-msg hook via Husky:

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

Sample commitlint configuration with custom types:

{
  "commitlint": {
    "extends": ["@commitlint/config-conventional"],
    "rules": {
      "type-enum": [2, "always", ["build","chore","ci","docs","feat","fix","perf","refactor","revert","style","test","ui","version"]]
    }
  }
}

Code Checking with ESLint and @typescript-eslint

Install the required packages:

# npm
npm install eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

# yarn
yarn add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

# pnpm
pnpm add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Typical ESLint usage steps: install, initialize configuration, add rules/plugins, run lint, and optionally fix automatically.

Example .eslintrc.js configuration:

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended'
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    '@typescript-eslint/ban-ts-comment': 'off'
  }
};

Combined with lint‑staged:

{
  "scripts": {
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "eslint . --ext ts,tsx --fix"
  },
  "lint-staged": {
    "*.(ts|tsx)": ["eslint --quiet"]
  }
}

Code Formatting with Prettier

Prettier automatically formats code to a consistent style.

Installation:

# npm
npm install prettier --save-dev

# yarn
yarn add prettier --dev

# pnpm
pnpm add prettier --save-dev

Configuration example in package.json:

{
  "prettier": {
    "trailingComma": "all",
    "arrowParens": "always",
    "printWidth": 120
  }
}

Integrate formatting with lint‑staged:

{
  "prettier": { ... },
  "lint-staged": {
    "*.(ts|tsx)": ["eslint --quiet"],
    "*.(ts|tsx|json|html)": ["prettier --write"]
  }
}