TypeScript and ESLint are assumed. Which optional tools are actually worth adding early?
A small set of optional tools keeps a team's code consistent and stops broken work from reaching the remote.
Formatting is not linting
TypeScript and ESLint are the baseline; assume they are already there. The first optional tool worth adding is Prettier, so the whole team's code looks the same and nobody argues about style in review. Keep the two jobs separate: ESLint catches bugs and bad patterns, Prettier handles layout. Run them together and the formatting noise stops drowning out the real lint warnings.
My project already has TypeScript and ESLint. Walk me through adding Prettier to a Next.js App Router project so it formats on save and does not fight my ESLint rules: [paste my current ESLint config].
Make the checks run themselves
A rule nobody runs is not a rule. Husky lets you wire Git hooks so checks fire automatically. A pre-commit hook can format and lint your staged changes, and pairing it with lint-staged means the linters run only on the files you actually touched, not the whole project, so the commit stays fast. A pre-push hook can run something heavier like type-check or tests, so broken code never reaches the remote in the first place.
Help me set up Husky with lint-staged for [my project]: a pre-commit hook that formats and lints only staged files, and a pre-push hook that runs type-check. Show me the config and explain what each hook blocks.
Commit hygiene buys you history
Once hooks are in place, add commitlint to enforce Conventional Commits. A consistent format gives you a history you can read and lets tools generate changelogs instead of you writing them by hand.
Set up commitlint with the Conventional Commits config for [my project] and a Husky commit-msg hook that rejects messages that do not follow the convention. Give me a few example commit messages that pass.
You do not assemble this by hand
You rarely wire all of this yourself. A solid starter kit ships it preconfigured (TypeScript, ESLint, Prettier, Husky, lint-staged, commitlint) plus the libraries you picked earlier in this chapter. The tooling is consistent from commit one, and you spend your time on features instead of plumbing.
I want to start a Next.js App Router project from a starter kit instead of wiring tooling by hand. What should a good boilerplate already include, and how do I check that its Prettier, Husky, lint-staged, and commitlint setup matches what I would have chosen for [my project]?
TypeScript and ESLint are assumed. Prettier, Husky with lint-staged, and commitlint are optional, but on a team they keep the code consistent and stop broken work from reaching the remote. A good starter kit wires all of it up for you.
Additional Resources
Explore these carefully curated resources to deepen your understanding and practice the concepts covered in this lesson.
Prettier
DocumentationAn opinionated code formatter that ends style debates by formatting on save and in a pre-commit hook.
https://prettier.io/docs/
Husky
DocumentationGit hooks made easy, so checks like lint and format run automatically before a commit or push.
https://typicode.github.io/husky/
Conventional Commits
DocumentationA commit message convention that commitlint can enforce, giving you a readable history and automated changelogs.
https://www.conventionalcommits.org/