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 each commit. Use this when you want to enforce code quality and consistency across your team.
- Installs and initializes Husky for git pre-commit hooks
- Configures lint-staged to run Prettier on all staged files
- Sets up Prettier with sensible defaults (80 char line width, 2-space tabs, trailing commas)
- Runs typecheck and test scripts during pre-commit if they exist in package.json
- Detects your package manager (npm, pnpm, yarn, bun) and uses the correct one
- Creates all necessary config files (.husky/pre-commit, .lintstagedrc, .prettierrc)
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 root directory
How to use setup-pre-commit
- 1.Run the skill to detect your package manager and install dependencies (husky, lint-staged, prettier)
- 2.The skill initializes Husky and creates .husky/pre-commit with lint-staged, typecheck, and test commands
- 3.Review the generated .prettierrc config and adjust formatting rules if needed
- 4.Run npx lint-staged to verify the setup works
- 5.Commit the changes—this will trigger the pre-commit hooks as a smoke test
Use cases
- Enforce consistent code formatting across a team before commits
- Catch type errors and test failures before code is committed
- Prevent unformatted or broken code from entering the repository
- Set up a new project with best-practice pre-commit workflows
- Migrate an existing repo to use Husky and lint-staged
- Frontend and full-stack developers
- Teams wanting to enforce code quality standards
- Projects using TypeScript or JavaScript
- Developers setting up new repositories with quality gates
setup-pre-commit FAQ
The skill detects missing scripts and omits those lines from the pre-commit hook, running only the scripts that exist in your package.json.
Yes. The skill creates .prettierrc only if one doesn't exist. Edit it after setup to change formatting rules like printWidth, tabWidth, or singleQuote.
The skill detects package-lock.json (npm), pnpm-lock.yaml (pnpm), yarn.lock (yarn), or bun.lockb (bun) and uses the corresponding manager. It defaults to npm if none are found.
lint-staged runs only on staged files (fast), followed by full typecheck and tests. You can adjust which scripts run if performance becomes an issue.
The skill uses prettier --ignore-unknown, which skips files Prettier cannot parse (images, binaries, etc.), so the hook won't fail on non-code files.
Full instructions (SKILL.md)
Source of truth, from vinvcn/mattpocock-skills-zh-cn.
name: setup-pre-commit description: 在当前仓库设置 Husky pre-commit hooks,集成 lint-staged (Prettier)、类型检查和测试。适用于用户想添加 pre-commit hooks、设置 Husky、配置 lint-staged,或在提交时运行格式化、类型检查和测试时。
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.

setup-ts-deep-modules
Enforce deep module boundaries in TypeScript monorepos using dependency-cruiser.

tdd
Test-Driven Development: write failing tests first, then minimal code to pass them.

teach
Create a structured learning workspace to teach users new skills or concepts with lessons, references, and progress tracking.

to-issues
Break plans into independent vertical-slice issues for your tracker using tracer-bullet decomposition.

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

to-questionnaire
Convert decisions you can't answer alone into a structured questionnaire for others to complete.