使用 Husky 提升代码质量

Source: Dev.to

Introduction

在现代软件开发中，保持代码质量不再是可有可无的需求——它是必不可少的。随着团队规模的扩大和代码库的增长，确保一致的标准、预防 bug、保持干净的提交历史变得越来越具挑战性。Husky 通过利用 Git hook，充当项目的质量守门人。

Installing Husky

npm install --save-dev husky
npx husky init

这将在项目根目录创建一个 .husky 目录，并附带示例 hook。与旧的 .git/hooks 目录不同，这个文件夹受版本控制，可与团队共享。

Project Structure

your-project/
├── .husky/
│   ├── pre-commit
│   ├── pre-push
│   └── commit-msg
├── package.json
└── …

.husky 中的每个文件对应一个 Git hook。

Prettier

Installation

npm install --save-dev prettier

Configuration (.prettierrc)

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

Husky Integration

创建或更新 .husky/pre-commit：

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

npx prettier --write --ignore-unknown "**/*"

现在每次提交都会自动格式化。

ESLint

Installation

npm install --save-dev eslint
npx eslint --init

Sample Configuration (.eslintrc.json)

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error",
    "prefer-const": "error"
  }
}

Husky Integration

更新 .husky/pre-commit：

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

# Run ESLint on staged files
npx eslint . --ext .js,.jsx,.ts,.tsx --fix

# Run Prettier
npx prettier --write --ignore-unknown "**/*"

# Stage any fixes
git add -A

lint‑staged

在每次提交前对整个代码库运行 linter 既慢又没有必要。lint-staged 只对已暂存的文件运行它们，从而显著提升性能。

Installation

npm install --save-dev lint-staged

Configuration (in package.json)

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,scss,md}": [
      "prettier --write"
    ]
  }
}

Husky Integration

更新 .husky/pre-commit：

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

npx lint-staged

这种设置快速、高效，只会触及相关文件。

TypeScript Projects

在 pre‑commit hook 中加入类型检查：

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "tsc --noEmit",
      "eslint --fix",
      "prettier --write"
    ]
  }
}

Conclusion

Husky 和自动化质量检查并不是要挑剔——它们的目的是让团队更高效，代码更可靠，发布更有信心。通过提前捕获问题，你把质量前移到开发过程的早期，从而减少 bug、提升协作，最终交付更好的软件。

最初的设置可能会感觉是额外工作，但投资回报是立竿见影的：花在格式争论和可预防 bug 上的时间更少，花在构建重要功能的时间更多。先从小处入手，逐步添加工具，观察代码质量和团队生产力的提升吧。