每次 Code Review 都在争论空格和分号?CI 频繁因为格式问题失败?本文将用 10 分钟配置 Git Hook,实现提交前自动格式化、Lint、甚至跑单元测试。全程配置代码可直接复制。
在团队协作中,Code Review 的价值在于讨论架构、逻辑和潜在 bug,而不是 “这里少个空格”、“ESLint 报错”。但现实中,这些琐事往往耗费大量时间。
解决方案:利用 Git Hook(钩子)在 pre-commit 阶段自动执行:
工具链:
npm install -D husky lint-staged
npx husky init
这会在项目根目录创建 .husky 文件夹,并在 package.json 中添加 prepare 脚本。
在 package.json 中添加:
{
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
],
"*.{css,scss,json,md}": [
"prettier --write"
]
}
}
编辑 .husky/pre-commit 文件:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
git add .
git commit -m "test hook"
如果暂存区有不符合 ESLint 的文件,会自动修复后提交;如果无法修复(如语法错误),提交会被阻止。
安装 jest --findRelatedTests:
{
"lint-staged": {
"*.{js,ts}": [
"eslint --fix",
"prettier --write",
"jest --bail --findRelatedTests"
]
}
}
npm install -D @commitlint/{cli,config-conventional}
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
git commit -m "fix" --no-verify
| 问题 | 原因 | 解决 |
|---|---|---|
husky 命令找不到 |
未运行 npm install 或未执行 husky init
|
重装依赖,重新 npx husky init
|
lint-staged 不生效 |
pre-commit 文件缺少执行权限 |
chmod +x .husky/pre-commit |
| Windows 上钩子不运行 |
.husky 中的 shebang 路径问题 |
改用 cross-env 或 WSL |
| 修复后仍然提交失败 | ESLint 有无法自动修复的错误 | 手动修复后重新 git add
|
package.json 片段{
"scripts": {
"prepare": "husky"
},
"lint-staged": {
"*.{js,ts,jsx,tsx}": ["eslint --fix", "prettier --write"],
"*.{css,scss,json,md}": ["prettier --write"]
}
}
.husky/pre-commit 文件#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
.husky/commit-msg 文件(可选)#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no -- commitlint --edit "$1"
建议收藏本文,下次新项目初始化时直接复制配置。
讨论:你们的团队用 Git Hook 了吗?有没有遇到过钩子导致提交缓慢的问题?欢迎评论区分享经验。