{title="📊 页面导航】

适用角色与上手难度

角色推荐度上手难度
🛠️ 开发★★★★★★☆☆☆☆
🧪 测试★★★★☆★☆☆☆☆
📦 产品★☆☆☆☆★☆☆☆☆

🎯 学习产出: 掌握 pre-commit 钩子配置,能一键搭好提交前格式化、类型检查和测试

🚀 AI 能力提升: 工程质量、自动化

setup-pre-commit

预计阅读时间: 3 分钟

Pre-commit 钩子。在当前仓库配置 Husky pre-commit 钩子:lint-staged 跑 Prettier + 类型检查 + 测试。

概述

装好之后,每次 git commit 自动:先 lint-staged 格式化暂存文件(快),再跑完整类型检查和测试(全)。让坏代码在提交前就被拦住。

日常使用

> 给这个仓库配置 pre-commit 钩子

实战

1. 检测包管理器

看锁文件:package-lock.json(npm)、pnpm-lock.yaml(pnpm)、yarn.lock(yarn)、bun.lockb(bun),用检测到的那个,不清楚默认 npm。

2. 安装依赖

devDependencies:husky lint-staged prettier

3. 初始化 Husky

npx husky init

创建 .husky/ 目录,package.json 加 prepare: "husky"

4. 写 .husky/pre-commit

(Husky v9+ 不需要 shebang):

npx lint-staged
npm run typecheck
npm run test

npm 换成检测到的包管理器;仓库没有 typecheck/test 脚本就省略对应行并告知用户。

5. 建 .lintstagedrc

{
  "*": "prettier --ignore-unknown --write"
}

6. 建 .prettierrc(缺失才建)

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": true,
  "arrowParens": "always"
}

7. 验证

  • .husky/pre-commit 存在且可执行
  • .lintstagedrc 存在
  • package.json 的 prepare"husky"
  • prettier 配置存在
  • npx lint-staged 跑通

8. 提交

stage 全部文件并提交 Add pre-commit hooks (husky + lint-staged + prettier)——这本身就穿过新钩子做冒烟测试。

备注

  • Husky v9+ 的钩子文件不需要 shebang
  • prettier --ignore-unknown 跳过 Prettier 解析不了的文件(图片等)
  • pre-commit 先跑 lint-staged(快,只处理暂存文件),再跑完整 typecheck 和测试

与其它技能的关系

  • 同类git-guardrails-claude-code 管提交前安全,本技能管提交前质量
  • 配套migrate-to-shoehorn 迁移后 typecheck 立即验证