setup-pre-commit
vinvcn/mattpocock-skills-zh-cn
Set up Husky pre-commit hooks with lint-staged, Prettier, type checking, and tests.
What is setup-pre-commit?
Configures Husky pre-commit hooks in your repository to automatically run Prettier formatting, type checking, and tests on staged files before commit. Use this when you want to enforce code quality and consistency at commit time.
- Installs and initializes Husky for pre-commit hooks
- Configures lint-staged to run Prettier on all staged files
- Creates Prettier configuration with sensible defaults if missing
- Runs typecheck and test scripts during pre-commit if they exist in package.json
- Auto-detects your package manager (npm, pnpm, yarn, bun)
- Skips non-parseable files like images with prettier --ignore-unknown
How to install setup-pre-commit
npx skills add https://github.com/vinvcn/mattpocock-skills-zh-cn --skill setup-pre-commit- Node.js and npm/pnpm/yarn/bun installed
- An existing Git repository
- A package.json file in the project root
How to use setup-pre-commit
- 1.Run the skill to detect your package manager and install dependencies
- 2.Husky will be initialized, creating .husky/ directory
- 3.The pre-commit hook will be created to run lint-staged, typecheck, and tests
- 4.Prettier and lint-staged configurations will be generated if missing
- 5.Verify the setup by checking that .husky/pre-commit exists and is executable
- 6.Make a test commit to confirm the hooks run correctly
Use cases
- Enforce code formatting before commits without manual intervention
- Catch type errors and test failures before code is committed
- Ensure consistent code style across team commits
- Prevent unformatted or broken code from entering the repository
- Set up quality gates for a new or existing project
- Teams wanting to enforce code quality standards
- Projects using TypeScript or type checking
- Developers setting up new repositories with quality tooling
- Teams using Prettier for code formatting
setup-pre-commit FAQ
The skill will omit those lines from the pre-commit hook and notify you. Only the scripts that exist in package.json will be included.
Yes. The skill only creates .prettierrc if one doesn't already exist. Your existing Prettier configuration will be respected.
The skill auto-detects by checking for package-lock.json (npm), pnpm-lock.yaml (pnpm), yarn.lock (yarn), or bun.lockb (bun). If none are found, it defaults to npm.
lint-staged only runs on staged files (fast), but full typecheck and tests run on every commit. You can optimize by adjusting which scripts run in the pre-commit hook.
Yes. After setup, edit .prettierrc to change formatting rules. The default uses 2-space indentation, 80 character line width, and trailing commas.
Full instructions (SKILL.md)
Source of truth, from vinvcn/mattpocock-skills-zh-cn.
name: setup-pre-commit description: 在当前 repo 设置 Husky pre-commit hooks,集成 lint-staged (Prettier)、type checking 和 tests。Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.
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
Steps
1. Detect package manager
检查 package-lock.json (npm)、pnpm-lock.yaml (pnpm)、yarn.lock (yarn)、bun.lockb (bun)。使用存在的那个。不清楚时默认 npm。
2. Install dependencies
作为 devDependencies 安装:
husky lint-staged prettier
3. Initialize Husky
npx husky init
这会创建 .husky/ dir,并向 package.json 添加 prepare: "husky"。
4. Create .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,就省略对应行并告知用户。
5. Create .lintstagedrc
{
"*": "prettier --ignore-unknown --write"
}
6. Create .prettierrc (if missing)
只有没有 Prettier config 时才创建。使用这些 defaults:
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": false,
"trailingComma": "es5",
"semi": true,
"arrowParens": "always"
}
7. Verify
-
.husky/pre-commit存在且可执行 -
.lintstagedrc存在 - package.json 中的
preparescript 是"husky" - prettier config 存在
- 运行
npx lint-staged验证可用
8. Commit
Stage 所有 changed/created files,并用 message 提交:Add pre-commit hooks (husky + lint-staged + prettier)
这会经过新的 pre-commit hooks,是一个不错的 smoke test。
Notes
- Husky v9+ 不需要 hook files 中的 shebangs
prettier --ignore-unknown会跳过 Prettier 无法 parse 的 files(images 等)- pre-commit 先运行 lint-staged(快,只针对 staged files),再运行完整 typecheck 和 tests
Related skills
More from vinvcn/mattpocock-skills-zh-cn and the wider catalog.

tdd
Build features test-first using red-green-refactor cycles with behavior-focused tests.

teach
在这个 workspace 中教用户一个新 skill 或概念。

to-issues
Break plans into vertical-slice issues for your issue tracker using tracer-bullet methodology.

to-prd
Convert conversation context into a structured PRD and publish to your project issue tracker.

triage
Triage issues through state machines with category and state roles for bug and enhancement management.

ubiquitous-language
从当前 conversation 提取 DDD-style ubiquitous language glossary,标记 ambiguities 并提出 canonical terms。保存到 UBIQUITOUS_LANGUAGE.md。Use when user wants to define domain terms, build a glossary, harden terminology, create a ubiquitous language, or mentions "domain model" or "DDD".