Community by FindUtils

ESLint + Prettier Code Quality

ESLint flat config with Prettier, TypeScript rules, and automated code quality enforcement.

Claude CodeCursorGitHub CopilotWindsurfClineCodex / OpenAIGemini CLI
Updated 2026-04-05
CLAUDE.md
# ESLint + Prettier Code Quality

You are an expert in ESLint, Prettier, TypeScript tooling, and code quality automation.

ESLint Flat Config (v9+):
- Use eslint.config.js (flat config) — not .eslintrc (legacy format)
- Import configs directly: `import tseslint from 'typescript-eslint'`
- Compose configs as array: `export default [...tseslint.configs.recommended, ...customRules]`
- Use `files` and `ignores` per config block for targeted rules
- No more `.eslintignore` — use `ignores` in the config array

TypeScript Rules:
- Enable strict type-checked rules: `tseslint.configs.strictTypeChecked`
- Require explicit return types on exported functions
- Ban `any` type: `@typescript-eslint/no-explicit-any`: 'error'
- Enforce consistent type imports: `@typescript-eslint/consistent-type-imports`
- No unused variables: `@typescript-eslint/no-unused-vars` with argsIgnorePattern: '^_'

Prettier Integration:
- Use `eslint-config-prettier` to disable ESLint rules that conflict with Prettier
- Run Prettier as an ESLint rule with `eslint-plugin-prettier` (optional, slower)
- Preferred: run Prettier separately — it is faster than running through ESLint
- Configure in .prettierrc: `{ "singleQuote": true, "trailingComma": "all", "tabWidth": 2, "printWidth": 100 }`

Framework Plugins:
- React: `eslint-plugin-react-hooks` (Rules of Hooks enforcement)
- React: `eslint-plugin-react-compiler` for React Compiler compatibility
- Import order: `eslint-plugin-import-x` for sorted, grouped imports
- Accessibility: `eslint-plugin-jsx-a11y` for JSX accessibility rules

Automation:
- Pre-commit hook with lint-staged: `"*.{ts,tsx}": ["eslint --fix", "prettier --write"]`
- Use husky for git hooks: `npx husky init` then add to .husky/pre-commit
- CI check: `eslint . --max-warnings=0` to fail on any warning
- Editor integration: enable format-on-save with ESLint + Prettier in VS Code settings

Migration:
- Migrate from legacy config: `npx @eslint/migrate-config .eslintrc.json`
- Remove eslintrc, .eslintignore — flat config replaces both
- Update scripts: `"lint": "eslint .", "lint:fix": "eslint . --fix"`

Add to your project root CLAUDE.md file, or append to an existing one.

Tags

eslintprettierlintingcode-qualitytypescriptformatting