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 running Prettier on all staged files
  • Prettier config (if missing)
  • typecheck and test scripts in the pre-commit hook
  • Husky 预提交钩子
  • lint-staged 对所有暂存文件执行Prettier格式化
  • Prettier 配置文件（若不存在则创建）
  • 预提交钩子中加入typecheck和test脚本

Steps

步骤

1. Detect package manager

1. 检测包管理器

Check for 
package-lock.json
(npm), 
pnpm-lock.yaml
(pnpm), 
yarn.lock
(yarn), 
bun.lockb
(bun). Use whichever is present. Default to npm if unclear.
检查是否存在
package-lock.json
（npm）、
pnpm-lock.yaml
（pnpm）、
yarn.lock
（yarn）或
bun.lockb
（bun）。使用已存在的包管理器，若无法确定则默认使用npm。

2. Install dependencies

2. 安装依赖

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

3. Initialize Husky

3. 初始化Husky

bash
npx husky init
This creates 
.husky/
dir and adds 
prepare: "husky"
to package.json.
bash
npx husky init
此命令会创建
.husky/
目录，并在package.json中添加
prepare: "husky"
脚本。

4. Create 
.husky/pre-commit

4. 创建
.husky/pre-commit
文件

Write this file (no shebang needed for Husky v9+):
npx lint-staged
npm run typecheck
npm run test
Adapt: Replace 
npm
with detected package manager. If repo has no 
typecheck
or 
test
script in package.json, omit those lines and tell the user.
写入以下内容（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
文件（若不存在）

Only create if no Prettier config exists. Use these 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
    exists and is executable
  • .lintstagedrc
    exists
  • prepare
    script in package.json is 
    "husky"
  • prettier
    config exists
  • Run 
    npx lint-staged
    to verify it works
  • 确认
    .husky/pre-commit
    文件存在且可执行
  • 确认
    .lintstagedrc
    文件存在
  • 确认package.json中的
    prepare
    脚本为
    "husky"
  • 确认Prettier配置文件存在
  • 执行
    npx lint-staged
    验证功能正常

8. Commit

8. 提交代码

Stage all changed/created files and commit with message: 
Add pre-commit hooks (husky + lint-staged + prettier)
This will run through the new pre-commit hooks — a good smoke test that everything works.
将所有修改/创建的文件加入暂存区，并使用提交信息：
Add pre-commit hooks (husky + lint-staged + prettier)
此提交会触发新配置的预提交钩子，是验证所有功能正常的良好冒烟测试。

Notes

注意事项

  • Husky v9+ doesn't need shebangs in hook files
  • prettier --ignore-unknown
    skips files Prettier can't parse (images, etc.)
  • The pre-commit runs lint-staged first (fast, staged-only), then full typecheck and tests
  • Husky v9+不需要在钩子文件中添加shebang
  • prettier --ignore-unknown
    会跳过Prettier无法解析的文件（如图片等）
  • 预提交钩子会先执行lint-staged（速度快，仅处理暂存文件），再执行完整的类型检查和测试