Enforces code quality using ESLint 9 flat config with TypeScript, React, React Hooks, Prettier integration, and Tailwind canonical class ordering. Use when: fixing lint errors, adding ESLint rules, configuring linting for new file types, understanding why a lint rule fires, or running the lint workflow.
This project uses ESLint 9 with flat config (eslint.config.mjs), TypeScript-ESLint, React/React Hooks, Prettier conflict resolution, and tailwind-canonical-classes for Tailwind CSS class ordering. The lint script auto-fixes: pnpm run lint → eslint . --fix.
# Lint with auto-fix (the standard workflow)
pnpm run lint
# Lint without auto-fix (check only)
npx eslint .
# Lint a specific file
npx eslint src/components/editor/toolbar.tsx --fix
The single config file is eslint.config.mjs at project root. It uses defineConfig from eslint/config and imports .prettierignore as the shared ignore file.
| Concept | Usage | Example |
|---|---|---|
| Flat config | Single eslint.config.mjs array of config objects | export default defineConfig([...]) |
| Shared ignores | Uses .prettierignore via includeIgnoreFile() | Ignores dist/, routeTree.gen.ts |
| Tailwind plugin | Warns on non-canonical Tailwind class order | "tailwind-canonical-classes/tailwind-canonical-classes": "warn" |
| Prettier integration | eslint-config-prettier disables conflicting rules | Placed after all other configs |
| TypeScript | tseslint.configs.recommended spread into config | ...tseslint.configs.recommended |
| React JSX runtime | No import React needed | pluginReact.configs.flat["jsx-runtime"] |
When: You need to enforce a project-specific pattern.
// In eslint.config.mjs — add a new config object to the array
{
rules: {
"no-console": ["warn", { allow: ["warn", "error"] }],
},
},
When: A generated or third-party file triggers lint errors.
Add it to .prettierignore — both Prettier and ESLint share this ignore file.
# .prettierignore
/src/routeTree.gen.ts
/src/some-generated-file.ts
When: A specific line legitimately needs an exception.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const rawData = response as any;
eslint-plugin-react-hooksFetch latest ESLint documentation with Context7.
How to use Context7:
mcp__context7__resolve-library-id to search for "eslint"/websites/) over source code repositoriesmcp__context7__query-docs using the resolved library IDLibrary ID: /websites/eslint (website docs, 4876 snippets, High reputation)
Recommended Queries: