What This Sets Up
- Husky pre-commit hook
- lint-staged Run Prettier on all staged files
lint-staged running Prettier on all staged files
- Prettier configuration (if missing)
Prettier config (if missing)
- The typecheck and test scripts in the pre-commit hook
typecheck and test scripts in the pre-commit hook
Steps
1. Detect the package manager
Check package-lock.json(npm)、pnpm-lock.yaml(pnpm)、yarn.lock(yarn)、bun.lockb(bun). Use whichever exists. If unsure, default to npm.
Check for
package-lock.json(npm),pnpm-lock.yaml(pnpm),yarn.lock(yarn),bun.lockb(bun). Use whichever is present. Default to npm if unclear.
2. Install dependencies
Install as devDependencies:
Install as devDependencies:
husky lint-staged prettier
3. Initialize Husky
npx husky init
This creates the .husky/ directory and adds prepare: "husky"。
This creates
.husky/dir and addsprepare: "husky"to package.json.
4. Create .husky/pre-commit
Write this file (Husky v9+ does not need a shebang):
Write this file (no shebang needed for Husky v9+):
npx lint-staged
npm run typecheck
npm run test
Adapt: 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.
Adapt: Replace
npmwith detected package manager. If repo has notypecheckortestscript in package.json, omit those lines and tell the user.
5. Create .lintstagedrc
{
"*": "prettier --ignore-unknown --write"
}
6. Create .prettierrc(if missing)
Only create if there is no Prettier configuration. Use the following defaults:
Only create if no Prettier config exists. Use these defaults:
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": false,
"trailingComma": "es5",
"semi": true,
"arrowParens": "always"
}
7. Verify
-
.husky/pre-commitexists and is executable.husky/pre-commitexists and is executable -
.lintstagedrcexists.lintstagedrcexists - The
preparescript in package.json is"husky"preparescript in package.json is"husky" -
prettierconfiguration existsprettierconfig exists - Run
npx lint-stagedto verify it worksRun
npx lint-stagedto verify it works
8. Commit
Stage all changed/created files and commit with the message:Add pre-commit hooks (husky + lint-staged + prettier)
Stage all changed/created files and commit with message:
Add pre-commit hooks (husky + lint-staged + prettier)
This will pass through the new pre-commit hooks — a smoke test to verify everything works.
This will run through the new pre-commit hooks — a good smoke test that everything works.
Notes
- Husky v9+ does not need a shebang added to hook files
Husky v9+ doesn't need shebangs in hook files
prettier --ignore-unknownSkip files that Prettier cannot parse (such as images)prettier --ignore-unknownskips files Prettier can't parse (images, etc.)- pre-commit first runs lint-staged (fast, staged files only), then runs the full type check and tests
The pre-commit runs lint-staged first (fast, staged-only), then full typecheck and tests