tooling: add pre-commit hook for Prettier format-check on staged files
- Dominant language
- HTML
- Stars
- 7
- Forks
- 11
- Avg merge
- 18h 3m
- Merged PRs (30d)
- 14
Description
## Problem
Prettier formatting drift on staged files goes undetected locally and only surfaces in the CI `Format-Check` step. This causes avoidable CI failures on otherwise-correct commits (most recently #755).
## Proposed solution
Add a pre-commit hook that runs Prettier only on **staged files** using [lint-staged](https://github.com/lint-staged/lint-staged) + [Husky](https://typicode.github.io/husky/).
This keeps the hook fast (ms per file, not seconds across the whole repo) and catches format issues before they ever reach CI.
### Suggested implementation
```bash
npm install --save-dev husky lint-staged
npx husky init
```
``.husky/pre-commit``
```bash
npx lint-staged
```
``package.json`` addition:
```json
"lint-staged": {
"**/*.{scss,css,js,json,md}": "prettier --check"
}
```
## Scope
- **In scope:** Prettier format-check on staged files only
- **Out of scope:** Running full `npm run lint` (stylelint across all SCSS) or `build:storybook` in the pre-commit hook — both are too slow for interactive use
## Acceptance criteria
- [ ] `husky` and `lint-staged` added as devDependencies
- [ ] `npx husky init` sets up `.husky/pre-commit`
- [ ] `lint-staged` config in `package.json` runs `prettier --check` on staged `.scss`, `.css`, `.js`, `.json`, and `.md` files
- [ ] Committing a Prettier-dirty file is blocked with a clear error message
- [ ] `npm run lint` and `npm run compile:check` still pass
- [ ] `prepare` script added so `npm install` auto-installs the hook for new contributors
## Related
- #755 (the CI failure that prompted this)
- #739 (Prettier was added to the repo)
Contributor guide
Research direction
Start with package.json and the repository's existing Format-Check, lint, and compile:check scripts, then review the proposed .husky/pre-commit file. Add the Husky and lint-staged setup described in the issue, verify that only staged SCSS, CSS, JavaScript, JSON, and Markdown files are checked, and confirm dirty commits are blocked while the listed npm checks still pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- tooling
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 76/100