Back to Details

setup-pre-commit

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

设置 Pre-Commit 钩子

Set Up Pre-Commit Hooks

将要设置的内容

What Will Be Set Up

  • Husky pre-commit 钩子
  • lint-staged 对所有暂存文件运行 Prettier
  • Prettier 配置（如果缺失）
  • typecheck 和 test 脚本在 pre-commit 钩子中运行
  • Husky pre-commit hook
  • lint-staged runs Prettier on all staged files
  • Prettier configuration (if missing)
  • typecheck and test scripts run in the pre-commit hook

步骤

Steps

1. 检测包管理器

1. Detect Package Manager

检查 
package-lock.json
（npm）、
pnpm-lock.yaml
（pnpm）、
yarn.lock
（yarn）、
bun.lockb
（bun）。使用已存在的那个。如果不确定，默认使用 npm。
Check for 
package-lock.json
(npm), 
pnpm-lock.yaml
(pnpm), 
yarn.lock
(yarn), 
bun.lockb
(bun). Use the existing one. Default to npm if unsure.

2. 安装依赖

2. Install Dependencies

安装为 devDependencies：
husky lint-staged prettier
Install as devDependencies:
husky lint-staged prettier

3. 初始化 Husky

3. Initialize Husky

bash
npx husky init
这会创建 
.husky/
目录并在 package.json 中添加 
prepare: "husky"
。
bash
npx husky init
This creates the 
.husky/
directory and adds 
prepare: "husky"
to package.json.

4. 创建 
.husky/pre-commit

4. Create 
.husky/pre-commit

写入以下内容（Husky v9+ 不需要 shebang）：
npx lint-staged
npm run typecheck
npm run test
适配：将 
npm
替换为检测到的包管理器。如果仓库的 package.json 中没有 
typecheck
或 
test
脚本，则省略对应行并告知用户。
Write the following content (shebang is not required for Husky v9+):
npx lint-staged
npm run typecheck
npm run test
Adaptation: Replace 
npm
with the detected package manager. If the repository's package.json does not have 
typecheck
or 
test
scripts, omit the corresponding lines and inform the user.

5. 创建 
.lintstagedrc

5. Create 
.lintstagedrc

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

6. 创建 
.prettierrc
（如果缺失）

6. Create 
.prettierrc
(if missing)

仅当不存在 Prettier 配置时才创建。使用以下默认值：
json
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": true,
  "arrowParens": "always"
}
Only create it if no Prettier configuration exists. Use the following default values:
json
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": true,
  "arrowParens": "always"
}

7. 验证

7. Verification

  • .husky/pre-commit
    存在且可执行
  • .lintstagedrc
    存在
  • package.json 中的 
    prepare
    脚本为 
    "husky"
  • prettier
    配置存在
  • 运行 
    npx lint-staged
    验证其是否正常工作
  • .husky/pre-commit
    exists and is executable
  • .lintstagedrc
    exists
  • The 
    prepare
    script in package.json is 
    "husky"
  • prettier
    configuration exists
  • Run 
    npx lint-staged
    to verify it works properly

8. 提交

8. Commit

暂存所有更改/创建的文件，并使用消息提交：
Add pre-commit hooks (husky + lint-staged + prettier)
这将触发新的 pre-commit 钩子执行——是一个很好的冒烟测试，验证一切正常。
Stage all changed/created files and commit with the message: 
Add pre-commit hooks (husky + lint-staged + prettier)
This will trigger the new pre-commit hook execution — it's a good smoke test to verify everything works correctly.

注意事项

Notes

  • Husky v9+ 不需要在钩子文件中加 shebang
  • prettier --ignore-unknown
    会跳过 Prettier 无法解析的文件（如图片等）
  • pre-commit 钩子先运行 lint-staged（快速，仅处理暂存文件），然后运行完整的 typecheck 和 test
  • Shebang is not required in hook files for Husky v9+
  • prettier --ignore-unknown
    skips files that Prettier cannot parse (such as images, etc.)
  • The pre-commit hook runs lint-staged first (fast, only processes staged files), then runs full typecheck and test