MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-6

1.0.3 ESLint + Prettier + Husky pre-commit hook + lint-staged

Done
Description

Estimate: 8m · Depends on: 1.0.1

Set up the code-quality toolchain so every commit is automatically linted and formatted. The goal: a developer who runs git commit can never accidentally commit a file that fails lint or has inconsistent formatting. This matters more for AI-generated code than for hand-written code — coding agents are happy to produce code that works but has slightly off style; the commit hook is the cheapest enforcement layer.

Why this stack: ESLint with @next/eslint-config-next is the Next.js community standard. Prettier handles formatting (less debate, more consistency). Husky manages git hooks declaratively. lint-staged runs the tools only on changed files (fast). Together: full lint + format pass on every commit in <2s for typical changes.

What you'll do: Install eslint, @next/eslint-config-next, prettier, eslint-config-prettier (turns off lint rules Prettier handles), husky, and lint-staged. Create .eslintrc.cjs extending Next + adding strict rules (no unused vars except _prefixed, no implicit any, no console.log in prod files). Create .prettierrc with the project's style (single quotes, no semicolons or with — pick one; 100-char lines; trailing commas). Run pnpm husky init; add a pre-commit hook that runs npx lint-staged; configure lint-staged in package.json to run ESLint and Prettier on staged .ts/.tsx files.

Acceptance criteria

  • pnpm lint runs ESLint across /app, /lib, /components and exits 0 on a clean repo.
  • pnpm format runs Prettier across the whole repo and fixes formatting in place.
  • pnpm format:check runs Prettier in check mode (used by CI) and exits 0 on a clean repo.
  • Husky installed; .husky/pre-commit exists and runs npx lint-staged.
  • lint-staged config in package.json runs ESLint (--fix) and Prettier on staged *.{ts,tsx,js,jsx,json,css,md}.
  • Test: introduce a deliberately mis-formatted file, stage and commit; the hook fixes it (or rejects).
  • Test: introduce an unused variable; pnpm lint fails with a clear error.
  • Documented in README.md (after 1.0.4): "We use ESLint + Prettier; commits are auto-formatted."

Context refs

  • Next.js ESLint config docs
  • Prettier 3.x docs (config format)
  • Husky v9+ docs (newer setup pattern is different from v7)
  • lint-staged docs (the package.json config pattern)
Status
Done
Type
Sub-task