Setup Pre Commit
Wire Husky pre-commit hooks with lint-staged Prettier plus optional typecheck and test scripts before every commit.
Overview
Setup Pre-Commit Hooks is an agent skill for the Ship phase that configures Husky, lint-staged, and Prettier so every commit formats staged files and runs typecheck and tests when those scripts exist.
Install
npx skills add https://github.com/vinvcn/mattpocock-skills-zh-cn --skill setup-pre-commitWhat is this skill?
- Detects npm, pnpm, yarn, or bun from lockfiles and adapts hook commands
- Installs Husky, lint-staged, and Prettier as devDependencies with `prepare: husky`
- Pre-commit runs lint-staged, then typecheck and test when those scripts exist
- Creates `.lintstagedrc` with Prettier on all staged files and default `.prettierrc` if missing
- Seven-step setup flow ending in a verify checklist for hook and config files
- 7-step setup flow with verify checklist
- Husky v9+ pre-commit without shebang
- lint-staged runs Prettier on all staged files via `*` glob
Adoption & trust: 478 installs on skills.sh; 485 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You keep committing unformatted code or type errors because nothing runs automatically before `git commit`.
Who is it for?
Solo builders on Node repos who want Matt Pocock-style pre-commit formatting and quick local gates without researching Husky v9 hook syntax.
Skip if: Repos without package.json, teams that rely only on server-side CI with no local hooks, or polyglot projects where Prettier on `*` is the wrong formatter strategy.
When should I use this skill?
User wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting, typechecking, or testing.
What do I get? / Deliverables
Your repo gets executable Husky hooks, lint-staged Prettier on staged files, and optional pre-commit typecheck and test runs matched to your package manager.
- .husky/pre-commit hook
- .lintstagedrc and optional .prettierrc
- Updated package.json devDependencies and prepare script
Recommended Skills
Journey fit
Commit-time quality gates belong on the Ship shelf because they block broken or unformatted code from entering the repo right before you merge or release. Testing subphase fits automated checks (format, types, tests) that run on staged files on each commit.
How it compares
Local git-hook setup skill—not a hosted CI pipeline or MCP server integration.
Common Questions / FAQ
Who is setup-pre-commit for?
Indie and solo developers shipping TypeScript or JavaScript apps who want automated Prettier, typecheck, and tests on staged files before each commit.
When should I use setup-pre-commit?
Use it during Ship when you are tightening quality gates—after you have basic tests or typecheck scripts and before you invite collaborators or cut a release branch.
Is setup-pre-commit safe to install?
Review the Security Audits panel on this Prism page and inspect generated `.husky/pre-commit` and package.json script changes before merging; the skill runs shell and package-manager installs in your repo.
SKILL.md
READMESKILL.md - Setup Pre Commit
# 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 ```bash 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` ```json { "*": "prettier --ignore-unknown --write" } ``` ### 6. Create `.prettierrc` (if missing) 只有没有 Prettier config 时才创建。使用这些 defaults： ```json { "useTabs": false, "tabWidth": 2, "printWidth": 80, "singleQuote": false, "trailingComma": "es5", "semi": true, "arrowParens": "always" } ``` ### 7. Verify - [ ] `.husky/pre-commit` 存在且可执行 - [ ] `.lintstagedrc` 存在 - [ ] package.json 中的 `prepare` script 是 `"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