setup-pre-commit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Setup Pre-Commit

提交前检查配置

Configure automated code quality checks at commit time using Husky and lint-staged.

使用Husky和lint-staged在代码提交时配置自动化代码质量检查。

When to use this skill

适用场景

Setting up a new project's commit-time quality gates
Adding formatting and type checking to an existing project
Standardizing pre-commit behavior across a team

为新项目搭建提交阶段的质量管控机制
为现有项目添加代码格式化与类型检查功能
统一团队的提交前检查行为

When not to use this skill

不适用场景

CI pipeline setup → use
```
deployment-automation
```
Git workflow strategy → use
```
git-workflow
```
Full testing strategy → use
```
testing-strategies
```

CI流水线配置 → 请使用
```
deployment-automation
```
技能
Git工作流策略制定 → 请使用
```
git-workflow
```
技能
完整测试策略制定 → 请使用
```
testing-strategies
```
技能

Installation process

安装流程

Step 1 — Detect package manager

步骤1 — 检测包管理器

bash

undefined

bash

undefined

Check for lockfiles in order of precedence

ls package-lock.json # npm ls yarn.lock # yarn ls pnpm-lock.yaml # pnpm ls bun.lockb # bun

undefined

ls package-lock.json # npm ls yarn.lock # yarn ls pnpm-lock.yaml # pnpm ls bun.lockb # bun

undefined

Step 2 — Install dependencies

步骤2 — 安装依赖

bash

undefined

bash

undefined

npm

npm install --save-dev husky lint-staged prettier

pnpm

pnpm add -D husky lint-staged prettier

yarn

yarn add -D husky lint-staged prettier

undefined

yarn add -D husky lint-staged prettier

undefined

Step 3 — Initialize Husky

步骤3 — 初始化Husky

bash

npx husky init

This creates

.husky/

directory and adds a

prepare

script to

package.json

bash

npx husky init

此命令会创建

.husky/

目录，并在

package.json

中添加

prepare

脚本。

Step 4 — Create the pre-commit hook

步骤4 — 创建提交前钩子

Create

.husky/pre-commit

npx lint-staged
npm run typecheck  # omit if script doesn't exist
npm test           # omit if script doesn't exist

Note: Husky v9+ doesn't need shebangs in hook files.

创建

.husky/pre-commit

文件：

npx lint-staged
npm run typecheck  # omit if script doesn't exist
npm test           # omit if script doesn't exist

注意：Husky v9及以上版本无需在钩子文件中添加shebang声明。

Step 5 — Configure lint-staged

步骤5 — 配置lint-staged

Create

.lintstagedrc

json

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

创建

.lintstagedrc

文件：

json

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

Step 6 — Configure Prettier (if absent)

步骤6 — 配置Prettier（若未配置）

Create

.prettierrc

only if it doesn't exist:

json

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

仅在项目中无

.prettierrc

文件时创建：

json

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

Step 7 — Verify

步骤7 — 验证配置

bash

git add -A
git commit -m "test: verify pre-commit hooks"

Watch for: lint-staged formatting, typecheck passing, tests passing.

bash

git add -A
git commit -m "test: verify pre-commit hooks"

验证内容：lint-staged格式化执行、类型检查通过、测试用例通过。

Execution order

执行顺序

lint-staged runs first (fast, only staged files) → typecheck (full project) → tests (full suite)

typecheck

test

scripts don't exist in

package.json

, omit those lines from the pre-commit hook.

lint-staged先运行（速度快，仅处理已暂存文件）→ 类型检查（全项目）→ 测试（完整测试套件）

若

package.json

中不存在

typecheck

或

test

脚本，请从提交前钩子文件中移除对应行。

Instructions

操作指引

Identify the task trigger and expected output.
Follow the workflow steps in this skill from top to bottom.
Validate outputs before moving to the next step.
Capture blockers and fallback path if any step fails.

明确任务触发条件与预期输出。
按本技能中的工作流步骤从上到下执行。
验证当前步骤输出后再进入下一步。
记录执行过程中的阻塞点，以及步骤失败时的备选方案。

Examples

示例

Example: Apply this skill to a small scope first, then scale to full scope after validation passes.

示例：先在小范围内应用本技能，验证通过后再扩展至全项目。

Best practices

最佳实践

Keep outputs deterministic and auditable.
Prefer small reversible changes over broad risky edits.
Record assumptions explicitly.

确保输出结果可预测且可追溯。
优先选择小范围、可回滚的修改，而非大范围高风险编辑。
明确记录所有假设条件。

References

参考资料

Project standards:

.agent-skills/skill-standardization/SKILL.md

Validator script:

.agent-skills/skill-standardization/scripts/validate_skill.sh

项目标准：

.agent-skills/skill-standardization/SKILL.md

验证脚本：

.agent-skills/skill-standardization/scripts/validate_skill.sh