ESLint Config Generator
Free online ESLint 9 flat config generator. Copy or download instantly — runs 100% in your browser.
Loading tool...
What is ESLint Config Generator?
An ESLint config generator produces the eslint.config.js file that tells ESLint how to lint your project: which language plugins to load, which rule sets to enable, which global variables exist, and which folders to skip. Since ESLint 9 the flat config format is the default, but assembling one from scattered docs is still error-prone. This tool gives you framework presets and clearly labeled switches, then emits a clean flat-config file in seconds — all offline in your browser.
Key Benefits
- Start from a preset that matches your framework instead of a blank file
- Understand each plugin toggle without digging through dense documentation
- Style-guide layering for Airbnb or Standard JS handled in the right order
- Valid flat-config syntax every time — no missed imports or trailing commas
- Works offline in your browser — nothing is uploaded anywhere
Common Use Cases
- •Bootstrap linting for a new Next.js, React, Vue, or Node.js project
- •Migrate a legacy .eslintrc setup to the ESLint 9 flat config format
- •Add TypeScript or Prettier support to an existing lint setup
- •Enable react-hooks rules to catch dependency-array bugs early
- •Standardize team lint configs across a monorepo
How to Use the ESLint Config Generator
- Pick a preset: Choose Next.js, React, Vue, or Node.js to start from a solid flat-config base.
- Toggle plugins: Switch on typescript-eslint, Prettier, react-hooks, react-refresh, Vitest, or JSDoc support as your stack needs.
- Set globals and ignores: Enable browser or Node globals and edit the comma-separated global ignores list for build folders.
- Copy or download: Review the live eslint.config.js preview, then copy it or download the file straight into your project root.
Key Features
- Presets for Next.js, React, Vue, and Node.js that follow current flat-config conventions
- One-click toggles for typescript-eslint, Prettier, react-hooks, react-refresh, Vitest, and JSDoc
- Style-guide options: Airbnb or Standard JS layered on top of the base config
- Editable global ignores list and browser/node globals in a single screen
- Live eslint.config.js preview with copy and download in one click
- Runs 100% in your browser — no setup, no account, no data leaves your machine
Frequently Asked Questions
What is a flat config?
Flat config is the config format ESLint uses since v9 (eslint.config.js by default). It replaces .eslintrc with a plain JavaScript array of config objects, which makes sharing, composing, and tooling integration far easier.
Which packages do I need to install?
At minimum eslint and globals, plus the presets you enable: typescript-eslint for TypeScript, eslint-config-prettier to disable formatting rules, eslint-plugin-react-hooks for React, and @vitest/eslint-plugin for Vitest test rules.
How do style guides like Airbnb or Standard differ?
Both are opinionated rule sets on top of the base config. Airbnb leans toward stricter class and style rules, while Standard JS enforces its own formatting with no config required. The generator layers the one you pick after your plugin blocks so its rules win.
Why does the config end with the Prettier entry?
eslint-config-prettier turns off all ESLint rules that conflict with Prettier formatting, so it must come last to override earlier style rules. If you add more style-heavy configs later, keep the Prettier entry at the very end.