Back to Details

setup-pre-commit

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Setup Pre-Commit Hooks

配置预提交钩子

What This Sets Up

配置内容

  • Husky pre-commit hook
  • lint-staged 对所有 staged files 运行 Prettier
  • Prettier config（如果缺失）
  • pre-commit hook 中的 typecheck 和 test scripts
  • Husky 预提交钩子
  • lint-staged 对所有暂存文件运行 Prettier
  • Prettier 配置（若缺失则创建）
  • 预提交钩子中的 类型检查 和 测试 脚本

Steps

步骤

1. Detect package manager

1. 检测包管理器

检查 
package-lock.json
(npm)、
pnpm-lock.yaml
(pnpm)、
yarn.lock
(yarn)、
bun.lockb
(bun)。使用存在的那个。不清楚时默认 npm。
检查 
package-lock.json
（npm）、
pnpm-lock.yaml
（pnpm）、
yarn.lock
（yarn）、
bun.lockb
（bun），使用已存在的包管理器。若无法确定则默认使用npm。

2. Install dependencies

2. 安装依赖

作为 devDependencies 安装：
husky lint-staged prettier
作为开发依赖安装：
husky lint-staged prettier

3. Initialize Husky

3. 初始化 Husky

bash
npx husky init
这会创建 
.husky/
dir，并向 package.json 添加 
prepare: "husky"
。
bash
npx husky init
这会创建 
.husky/
目录，并向 package.json 中添加 
prepare: "husky"
脚本。

4. Create 
.husky/pre-commit

4. 创建 
.husky/pre-commit

写入这个文件（Husky v9+ 不需要 shebang）：
npx lint-staged
npm run typecheck
npm run test
Adapt：把 
npm
替换为检测到的 package manager。如果 repo 的 package.json 没有 
typecheck
或 
test
script，就省略对应行并告知用户。
向该文件写入以下内容（Husky v9+ 不需要 shebang）：
npx lint-staged
npm run typecheck
npm run test
适配说明：将 
npm
替换为检测到的包管理器。如果仓库的 package.json 中没有 
typecheck
或 
test
脚本，则省略对应行并告知用户。

5. Create 
.lintstagedrc

5. 创建 
.lintstagedrc

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

6. Create 
.prettierrc
(if missing)

6. 创建 
.prettierrc
（若缺失）

只有没有 Prettier config 时才创建。使用这些 defaults：
json
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": true,
  "arrowParens": "always"
}
仅当没有 Prettier 配置时才创建，使用以下默认配置：
json
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": true,
  "arrowParens": "always"
}

7. Verify

7. 验证

  • .husky/pre-commit
    存在且可执行
  • .lintstagedrc
    存在
  • package.json 中的 
    prepare
    script 是 
    "husky"
  • prettier config 存在
  • 运行 
    npx lint-staged
    验证可用
  • .husky/pre-commit
    文件存在且可执行
  • .lintstagedrc
    文件存在
  • package.json 中的 
    prepare
    脚本为 
    "husky"
  • Prettier 配置文件存在
  • 运行 
    npx lint-staged
    验证功能可用

8. Commit

8. 提交代码

Stage 所有 changed/created files，并用 message 提交：
Add pre-commit hooks (husky + lint-staged + prettier)
这会经过新的 pre-commit hooks，是一个不错的 smoke test。
暂存所有修改/创建的文件，并使用提交信息：
Add pre-commit hooks (husky + lint-staged + prettier)
这会触发新的预提交钩子，是一个不错的冒烟测试。

Notes

注意事项

  • Husky v9+ 不需要 hook files 中的 shebangs
  • prettier --ignore-unknown
    会跳过 Prettier 无法 parse 的 files（images 等）
  • pre-commit 先运行 lint-staged（快，只针对 staged files），再运行完整 typecheck 和 tests
  • Husky v9+ 不需要在钩子文件中添加 shebang
  • prettier --ignore-unknown
    会跳过 Prettier 无法解析的文件（如图片等）
  • 预提交流程会先运行 lint-staged（速度快，仅针对暂存文件），再运行完整的类型检查和测试