Git Commit 前自动修复代码风格？配置 Husky + lint-staged，从此 CR 只聊逻辑

每次 Code Review 都在争论空格和分号？CI 频繁因为格式问题失败？本文将用 10 分钟配置 Git Hook，实现提交前自动格式化、Lint、甚至跑单元测试。全程配置代码可直接复制。

一、痛点：CR 不应该讨论格式

在团队协作中，Code Review 的价值在于讨论架构、逻辑和潜在 bug，而不是"这里少个空格"、"ESLint 报错"。但现实中，这些琐事往往耗费大量时间。

解决方案 ：利用 Git Hook（钩子）在 pre-commit 阶段自动执行：

• 格式化代码（Prettier）
• 检查语法（ESLint）
• 可选：运行相关单元测试

工具链：

• Husky：简化 Git Hook 配置
• lint-staged：只对暂存区文件执行检查（速度极快）

二、10 分钟配置步骤

2.1 安装依赖

npm install -D husky lint-staged

2.2 初始化 Husky

npx husky init

这会在项目根目录创建 .husky 文件夹，并在 package.json 中添加 prepare 脚本。

2.3 配置 lint-staged

在 package.json 中添加：

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

2.4 添加 pre-commit 钩子

编辑 .husky/pre-commit 文件：

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

npx lint-staged

2.5 测试

git add .
git commit -m "test hook"

如果暂存区有不符合 ESLint 的文件，会自动修复后提交；如果无法修复（如语法错误），提交会被阻止。

三、进阶配置

3.1 提交前自动跑单元测试（只测试相关文件）

安装 jest --findRelatedTests：

{
  "lint-staged": {
    "*.{js,ts}": [
      "eslint --fix",
      "prettier --write",
      "jest --bail --findRelatedTests"
    ]
  }
}

3.2 使用 commitlint 规范 commit message

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"'

3.3 跳过钩子（紧急情况）

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"

六、总结

• Husky + lint-staged 让代码规范自动化，CR 回归逻辑讨论
• 配置成本仅 10 分钟，收益却是长期的
• 支持渐进增强：先加格式化，再加 Lint，最后加测试
• 文中所有代码已验证，可放心使用

建议收藏本文，下次新项目初始化时直接复制配置。

讨论：你们的团队用 Git Hook 了吗？有没有遇到过钩子导致提交缓慢的问题？欢迎评论区分享经验。