ESLint Flat Config Generator — Create eslint.config.js Instantly

ESLint Flat Config Generator is a free, browser-based tool that generates valid eslint.config.js files for modern JavaScript and TypeScript projects. Pick your framework, toggle TypeScript and Prettier, choose a rule preset, and copy or download a ready-to-use flat config in under a minute — no signup, no install.

The Problem

ESLint 9 introduced a new configuration system called "flat config." The old .eslintrc.* format is deprecated. Every project now needs an eslint.config.js (or .mjs) file — and the new format is fundamentally different from what most developers have been copying from Stack Overflow for years.

The flat config format uses ES module imports, explicit plugin registration, and a different shape for language options and rules. A typical React TypeScript project needs:

• @eslint/js for the base recommended rules
• typescript-eslint with its own plugin and parser
• eslint-plugin-react-hooks for React-specific rules
• eslint-plugin-react-refresh for Vite/Rollup setups
• eslint-config-prettier to disable formatting rules that conflict with Prettier
• All wired together in the right order with correct files globs

Getting the import paths wrong, the plugin names wrong, or the parserOptions shape wrong produces cryptic errors. Developers spend 30–60 minutes on a config that should take 2.

How It Works

1. Framework Selection

Select from five targets: React, Next.js, Vue, Node.js, and Vanilla JS. The generator includes the right plugins and globals for each:

• React — includes eslint-plugin-react-hooks and eslint-plugin-react-refresh with globals.browser
• Next.js — includes @next/eslint-plugin-next core-web-vitals config and both globals.browser and globals.node
• Vue — includes eslint-plugin-vue with vue-eslint-parser and .vue file glob patterns
• Node.js — uses globals.node and excludes browser-specific rules
• Vanilla JS — clean minimal config with browser globals only

2. TypeScript Toggle

Enable TypeScript to switch the entire config to use typescript-eslint's tseslint.config() wrapper. This automatically adds the TypeScript parser, the @typescript-eslint plugin, and the correct parserOptions with projectService: true for type-aware linting rules.

3. Rule Presets

Three presets let you calibrate strictness:

• Recommended — js.configs.recommended or tseslint.configs.recommended. Safe defaults that catch real bugs without being noisy. Good for most projects.
• Strict — adds tseslint.configs.strictTypeChecked and stylisticTypeChecked, or js.configs.all for JS projects. Best for new codebases or teams that want maximum coverage.
• Minimal — only critical checks enabled. Ideal for incrementally adopting ESLint in a large existing codebase where you need linting without a flood of red lines on day one.

4. Prettier Integration

Toggle Prettier to append eslint-config-prettier at the end of the config. This disables all ESLint formatting rules that would conflict with Prettier's output — the correct way to use both tools together in 2025.

5. Install Command

The generated config includes a ready-to-copy npm install --save-dev command at the top listing every required package for the chosen options. No more hunting through documentation to find which packages a config needs.

Key Features

• 5 frameworks — React, Next.js, Vue, Node.js, Vanilla JS
• TypeScript-ready — full typescript-eslint integration with type-aware rules
• Prettier integration — one toggle, correctly placed eslint-config-prettier
• 3 rule presets — Recommended, Strict, Minimal
• Install command included — exact npm install command for chosen options
• Copy & download — copy to clipboard or download as eslint.config.js
• 100% client-side — no API calls, no data leaves your browser
• No signup required — open, configure, copy, done

Technical Implementation

Core Technologies

• Next.js 16 with App Router
• TypeScript in strict mode
• Tailwind CSS v4 with OKLCH color tokens
• shadcn/ui + Radix UI components
• Framer Motion for animations
• Pure client-side config generation — useMemo over a pure function, zero API calls

Config Generation Architecture

The config generator is a pure function: given a ConfigOptions object (framework, typescript, prettier, preset), it returns a string of valid JavaScript. No templating engine, no eval — just string concatenation with a small number of well-defined code paths.

This makes the generator deterministic: the same options always produce the same output, and the output is fully testable without a browser. The UI is just a wrapper that feeds options into the function and displays the result.

Flat Config Format Correctness

The generated configs follow ESLint's official flat config documentation:

• TypeScript projects use tseslint.config() wrapper (not the raw array format) for correct merging of multiple configs
• The parserOptions.projectService: true format is used (not the deprecated project: ["./tsconfig.json"] path-based format)
• Plugins are registered under their canonical names (react-hooks, not reactHooks)
• globals are spread into languageOptions.globals, not the deprecated top-level env field
• Ignores use the { ignores: [...] } object format, not .eslintignore

Use Cases

Starting a New Project

You've run create-next-app or npm create vite@latest and need a proper ESLint config. Instead of copying from a tutorial that may be using the old .eslintrc format, open the generator, select your framework, and download eslint.config.js in 30 seconds.

Migrating from .eslintrc to Flat Config

ESLint 9 still supports the old format via a compatibility utility, but migrating fully to flat config is recommended. Use the generator to produce the target flat config, then diff against your current rules to identify what you need to preserve.

Onboarding New Projects at Scale

If you work at an agency or consultancy and set up multiple projects per month, the generator removes the time spent on boilerplate config. Framework + TypeScript + Prettier: download, done.

Teaching ESLint Configuration

The generated config includes clear imports, explicit plugin registration, and inline comments. It is a readable starting point for developers learning how flat config works — easier to understand than documentation alone.

Debugging ESLint 9 Upgrade Issues

When upgrading an existing project to ESLint 9, comparison against a known-good generated config is useful for identifying what changed or was misconfigured in the migration.

Why ESLint Flat Config Generator?

vs. Manual Configuration

• No documentation hunting — every required package is listed in the install command
• Correct format — generates flat config syntax, not the deprecated .eslintrc format
• Plugin names — no confusion about whether to use reactHooks or react-hooks as the plugin key

vs. Copy-Pasting from Stack Overflow

• Up to date — generates configs for ESLint 9 flat config, not the old format
• Options-aware — output matches your specific combination of framework, TypeScript, and Prettier
• Install command included — no need to cross-reference multiple plugin repositories for package names

vs. eslint --init

• No prompts — no interactive CLI wizard to navigate
• Prettier integration — eslint --init doesn't add Prettier config
• Offline — works in the browser without Node.js installed

Results

ESLint Flat Config Generator removes the friction from ESLint 9 adoption:

• Under 60 seconds from open to working config
• Zero manual research — all packages and options determined automatically
• Correct syntax — generates eslint.config.js, not .eslintrc
• Immediately usable — copy, paste, run npm install, lint

---

Try it now: eslint-flat-config-generator.tools.jagodana.com