ESLint Flat Config Generator: Create eslint.config.js in Seconds

ESLint 9 made flat config the default. The old .eslintrc.json, .eslintrc.js, and .eslintrc.yml files are deprecated. If you have not migrated yet — or if you are starting a new project and want to do it right from day one — this tool generates a complete, working eslint.config.js in under a minute.

What Changed in ESLint 9 Flat Config?

ESLint 9 introduced a fundamentally different configuration model. The biggest differences:

Single file, ES module format. Instead of .eslintrc.* files scattered across your project, flat config uses one eslint.config.js (or .mjs) file at the root. It exports a JavaScript array, not a JSON object, which means you can use real imports, conditionals, and logic.

Explicit plugin registration. In the old format, you wrote "plugins": ["react-hooks"] and ESLint resolved the package automatically. In flat config, you import the plugin explicitly and register it under a name you choose. This eliminates the ambiguity around plugin naming conventions.

languageOptions replaces env and parser. The old env: { browser: true } is now languageOptions: { globals: { ...globals.browser } }. Parser configuration moves into languageOptions.parser and languageOptions.parserOptions. The shape is different enough that most old configs break directly.

File targeting with files globs. Instead of .eslintignore and cascading configs, flat config uses explicit files patterns in each config object. You can have different rules for *.ts files, *.test.ts files, and *.js config files in the same flat array.

Why Is Flat Config Better for Most Projects?

Flat config is not just a syntax change. It fixes real problems with the old system:

No more implicit cascading. The old system merged configs from every .eslintrc file found walking up the directory tree. Flat config is explicit: your array is your config, and nothing else is merged in unless you say so.

Easier to reason about. A single JavaScript file with imports is easier to read, debug, and review than a mix of JSON, YAML, and JS config files at different directory levels.

Better TypeScript integration. typescript-eslint v8 was redesigned around flat config. Type-aware rules now use parserOptions.projectService instead of a fragile project path array, which is faster and more reliable.

Shareable configs are just arrays. A shareable config is now an array that you spread into your own array. No more extends resolution magic or peer dependency conflicts.

How to Generate Your ESLint Flat Config

The ESLint Flat Config Generator takes four inputs and produces a complete, copy-ready config.

Step 1 — Pick Your Framework

Choose from React, Next.js, Vue, Node.js, or Vanilla JS. Each preset includes the right plugins, globals, and file patterns for that environment. A Node.js config uses globals.node. A React config includes eslint-plugin-react-hooks and eslint-plugin-react-refresh. A Next.js config adds @next/eslint-plugin-next with core-web-vitals.

Step 2 — Toggle TypeScript

If you are using TypeScript, enable the TypeScript toggle. This switches the entire config to use typescript-eslint's tseslint.config() wrapper, adds the TypeScript parser, and configures parserOptions.projectService: true for type-aware linting.

Step 3 — Choose a Rule Preset

Three presets cover the common cases:

• Recommended — the right starting point for most projects. Enables @eslint/js recommended rules (or tseslint.configs.recommended for TypeScript). Catches real bugs without noise.
• Strict — adds tseslint.configs.strictTypeChecked for TypeScript projects, or js.configs.all for JavaScript. Best for greenfield projects or teams that want comprehensive coverage.
• Minimal — only a handful of critical rules. Use this when you are introducing ESLint to a large codebase that currently has none and cannot absorb hundreds of warnings on day one.

Step 4 — Add Prettier

If you use Prettier for formatting, toggle the Prettier integration. This adds eslint-config-prettier as the last item in the config array, disabling all ESLint rules that would conflict with Prettier's output. This is the correct way to use both tools together — not by disabling Prettier rules, but by disabling ESLint's formatting opinions.

The generator includes the npm install command for every package required by your chosen options. No separate documentation hunting.

What Does a Generated Config Look Like?

Here is an example output for a React TypeScript project with Recommended rules and Prettier:

// Install dependencies first:
// npm install --save-dev eslint @eslint/js globals typescript-eslint eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-config-prettier
 
import tseslint from "typescript-eslint";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import prettierConfig from "eslint-config-prettier";
 
export default tseslint.config(
  { ignores: ["dist", ".next", "node_modules"] },
  {
    extends: [
      ...tseslint.configs.recommended,
      prettierConfig,
    ],
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2022,
      sourceType: "module",
      globals: {
        ...globals.browser,
      },
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
    },
  },
);

This config is valid for ESLint 9+. It uses tseslint.config() for correct TypeScript merging, registers plugins explicitly, and places Prettier last to avoid rule conflicts.

Common Questions About ESLint Flat Config

What is the difference between eslint.config.js and eslint.config.mjs?

Both work for flat config. Use .js if your project's package.json has "type": "module" (native ES modules). Use .mjs to force ES module syntax regardless of package.json type. Use .cjs for CommonJS require() syntax. For most modern projects, .js with "type": "module" is the right choice.

Can I still use eslint.config.js with ESLint 8?

Yes, but you need to opt in. Set the environment variable ESLINT_USE_FLAT_CONFIG=true before running ESLint 8. ESLint 8 added flat config support behind a flag in version 8.21. ESLint 9 makes it the default with no flag needed.

Do I need to delete my .eslintignore file?

Yes. In flat config, ignore patterns go inside the config array as { ignores: ["dist", "node_modules"] } objects. The .eslintignore file is ignored when using flat config. The generator includes a default ignores object with dist, .next, and node_modules.

Does the generator work for monorepos?

The generated config works for single packages. For monorepos, you typically want a root eslint.config.js that sets global ignores, and package-level configs that extend the root. The generated config is a good starting point for each package's config, though monorepo-specific wiring (workspace root resolution, per-package TypeScript config paths) needs manual adjustment.

Is the generated config production-ready?

Yes. The generator produces configs used in real projects. The TypeScript preset uses projectService: true (not the deprecated project path array), plugins are registered under canonical names, and the files globs are correct for each framework. You may want to add custom rules on top — but the generated output is a working, deployable baseline.

Why Use a Generator Instead of the ESLint Documentation?

ESLint's official documentation covers every option exhaustively, which makes it comprehensive but slow to navigate when you just want a working config. The generator encodes the "correct path" for common project types. You do not need to read about projectService vs project, or understand why eslint-config-prettier must be last, or remember which glob pattern to use for Vue files. The generator handles it.

Try It

ESLint Flat Config Generator is free, runs entirely in the browser, and requires no signup. Select your framework, toggle your options, and copy a working eslint.config.js in under a minute.

This is part of the 365 Tools Challenge — one small, useful developer tool built and shipped every day.