husky 和 lint-staged

husky 和 lint-staged 是一对黄金搭档，主要用于在 Git 提交代码前，自动对代码进行格式化和质量检查，确保进入仓库的代码都符合团队的规范。你可以把它们理解为一个两阶段的自动化流程。

核心概念

🦴 Husky：Git 钩子触发器

Husky 是一个让 Git 钩子 配置变得更简单的工具。Git 本身支持在特定动作（如 commit, push）前后执行自定义脚本，但手动配置比较繁琐。Husky 帮你轻松地在项目中创建和管理这些钩子。

它的作用是"在合适的时机，触发特定的命令 "。例如，在 pre-commit 阶段（即用户执行 git commit 但还未生成提交记录之前）运行一个脚本。

🎯 lint-staged：暂存区文件筛选器

lint-staged 的作用是"只针对添加到 Git 暂存区的文件运行指定的任务。为什么需要它？因为在项目上直接对整个代码库运行 linter（如 ESLint）速度会很慢，而且你只关心即将提交的代码。

它的优点是效率高，只检查你本次修改并准备提交的文件，而不是整个项目。

协同工作原理

它们是如何配合的呢？典型的工作流程如下：

开发者执行命令 ：你完成了代码编写，执行 git commit -m "..."。
Husky 拦截 ：Husky 检测到 pre-commit 钩子被触发，于是执行预先设置好的命令。
启动 lint-staged ：这个命令通常是 npx lint-staged。它将接管控制权。
筛选并执行检查 ：lint-staged 获取所有暂存区的文件，根据你的配置（如 "*.js": "eslint --fix"）对这些文件执行检查和自动修复。
提交结果 ：如果所有检查都通过了，lint-staged 将控制权交还给 Git，Git 才会真正生成这次提交。如果任何检查失败，Git 会中止提交，并显示错误信息，直到你修复所有问题。

简单来说：Husky 负责"什么时候做"，lint-staged 负责"对什么文件做"。

配置实战

下面是如何在一个项目中配置这套流程的标准步骤。

1. 安装依赖

bash 复制代码

npm install --save-dev husky lint-staged

2. 初始化 Husky

这一步会在项目根目录下创建一个 .husky 文件夹，并设置好 Git 钩子的路径。

bash 复制代码

npx husky init

这条命令通常会在 package.json 的 scripts 中添加一个 "prepare" 脚本，这样当你或你的同事运行 npm install 时，Husky 就会自动完成设置，保证团队配置一致。

3. 添加 pre-commit 钩子

创建一个 pre-commit 钩子文件，并让它运行 lint-staged。

bash 复制代码

npx husky add .husky/pre-commit "npx lint-staged"

这会在 .husky/pre-commit 文件中生成一行 npx lint-staged。

4. 配置 lint-staged

在 package.json 文件中，添加一个 lint-staged 字段，定义对不同文件类型要执行什么命令。

json 复制代码

{
  "scripts": {
    "prepare": "husky"
  },
  "devDependencies": {
    "husky": "^8.0.0",
    "lint-staged": "^15.0.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss,json,md}": [
      "prettier --write"
    ]
  }
}

常用钩子扩展

除了 pre-commit，你还可以用 Husky 配置其他钩子，比如 commit-msg 来规范提交信息。

配置 commit-msg 钩子的示例：

安装校验工具：

bash 复制代码

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

创建 commitlint.config.js 配置文件：

javascript 复制代码

module.exports = {
  extends: ['@commitlint/config-conventional']
};

添加 Husky 钩子：

bash 复制代码

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

这样，当你执行 git commit -m "..." 时，不仅代码会被 lint-staged 检查，提交信息也会被 commitlint 校验，必须符合规范（如 feat: 增加新功能）才能提交成功。

总结

工具	角色	作用
Husky	触发器	响应 Git 事件（如 `pre-commit`），启动自动化流程
lint-staged	执行器	针对 Git 暂存区文件，运行特定的检查、格式化命令

通过这套组合拳，你可以将代码质量检查完全自动化，既解放了手动检查的精力，又从流程上保证了代码库的整洁和一致性，是团队协作中非常值得引入的实践。