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. 安装依赖
npm install --save-dev husky lint-staged
2. 初始化 Husky
这一步会在项目根目录下创建一个 .husky 文件夹,并设置好 Git 钩子的路径。
npx husky init
这条命令通常会在 package.json 的 scripts 中添加一个 "prepare" 脚本,这样当你或你的同事运行 npm install 时,Husky 就会自动完成设置,保证团队配置一致。
3. 添加 pre-commit 钩子
创建一个 pre-commit 钩子文件,并让它运行 lint-staged。
npx husky add .husky/pre-commit "npx lint-staged"
这会在 .husky/pre-commit 文件中生成一行 npx lint-staged。
4. 配置 lint-staged
在 package.json 文件中,添加一个 lint-staged 字段,定义对不同文件类型要执行什么命令。
{
"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 钩子的示例:
-
安装校验工具:
npm install --save-dev @commitlint/cli @commitlint/config-conventional -
创建
commitlint.config.js配置文件:module.exports = { extends: ['@commitlint/config-conventional'] }; -
添加 Husky 钩子:
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 暂存区文件,运行特定的检查、格式化命令 |
通过这套组合拳,你可以将代码质量检查完全自动化,既解放了手动检查的精力,又从流程上保证了代码库的整洁和一致性,是团队协作中非常值得引入的实践。