ESLint Config Generator: Flat Config or Legacy, Built for Your Stack
Setting up ESLint from scratch means picking the right base config, wiring up framework-specific plugins, and deciding between the newer flat config format and the older .eslintrc format — easy to get wrong if you're not doing it every day. This generator builds a working starting config from a few toggles: framework, TypeScript, environment, and Prettier compatibility.
Flat config is a plain array; legacy config uses the 'extends' string array.
Why ESLint Moved to Flat Config
The legacy .eslintrc format resolved 'extends' strings through a complex module-resolution algorithm that was hard to reason about and slow. Flat config (eslint.config.js) replaces that with plain JavaScript — you import the configs you want and put them in an array — making it explicit, debuggable, and just regular ES modules.
Framework-Specific Rule Sets
React projects need eslint-plugin-react and eslint-plugin-react-hooks to catch hook-rule violations and JSX-specific issues. Vue needs eslint-plugin-vue for template linting. Next.js ships its own eslint-config-next package that bundles Core Web Vitals and (optionally) TypeScript-aware rules tuned specifically for the framework.
Why Prettier and ESLint Can Conflict
Some of ESLint's base rules check formatting details (indentation, quote style) that overlap with what Prettier controls. Running both without coordination causes ESLint to flag things Prettier just formatted correctly. eslint-config-prettier disables exactly those conflicting rules, letting each tool own its lane.
Practical Examples
A React + TypeScript Project
Common modern frontend setup.
- 1.Framework: React
- 2.TypeScript: on
- 3.Environment: Browser
- 4.Format: Flat Config
A Node.js API with Legacy Tooling
For projects still on ESLint 8-style config.
- 1.Framework: None
- 2.Environment: Node
- 3.Format: Legacy (.eslintrc.json)
What This Generator Configures
- Base rules: ESLint recommended
- Framework: React, Vue 3, Next.js, or none
- TypeScript: adds typescript-eslint recommended rules
- Environment globals: Browser and/or Node
- Prettier compatibility: disables conflicting stylistic rules
After Generating, Remember To
- npm install the packages referenced in the imports/extends
- Adjust the rules block to match your team's preferences
- Add an .eslintignore or 'ignores' entry for build output
- Run npx eslint . to confirm it works before committing
Frequently Asked Questions
What's the difference between Flat Config and Legacy .eslintrc?
Flat Config (eslint.config.js) is the format ESLint 9+ uses by default — a plain array of config objects, no more 'extends' string resolution magic. Legacy .eslintrc.json is the older format still supported for backward compatibility and used by many existing projects and older tooling.
Which format should I use for a new project?
Flat Config, if your ESLint version and plugins support it (most major plugins do as of ESLint 9). It's simpler to reason about and is where ESLint's own documentation and defaults are heading.
Does this install the packages for me?
No — it generates the config file content only. You'll still need to npm install the packages referenced in the config (eslint, typescript-eslint, eslint-plugin-react, etc.) separately.
Why does selecting Next.js change the TypeScript handling?
eslint-config-next already bundles its own TypeScript-aware rules (via eslint-config-next/typescript), so this generator uses that instead of layering a separate typescript-eslint recommended config on top, avoiding duplicate/conflicting rules.
What does 'Prettier compatibility' actually add?
It adds eslint-config-prettier (or the 'prettier' extends entry in legacy config), which turns off ESLint's own stylistic rules that would otherwise conflict with Prettier's formatting — letting Prettier own formatting and ESLint own code-quality rules.
Can I add custom rules after generating this?
Yes — the generated config includes a rules block you can extend with your own overrides. Both formats support adding project-specific rule customizations on top of the base recommended sets.