Skip to content

ESLint Flat Config Builder

Build an ESLint 9 eslint.config.js from TypeScript, React, Vue and Node presets with custom rules and file overrides, or migrate a legacy .eslintrc.

ESLint Flat Config Builder

Presets

Language

Custom rules

No custom rules. Try common ones below.

File-glob overrides

No overrides. Use these to relax rules in test files, scripts, etc.

eslint.config.js
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import globals from "globals";

export default tseslint.config(
  { ignores: ["dist", "build", "node_modules", "coverage", ".next", ".astro"] },
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2024,
      sourceType: "module",
      globals: { ...globals.node, ...globals.browser }
    }
  }
);

Updated . Provided as is. Check the output before you rely on it in production.

How to use ESLint Flat Config Builder

  1. 1

    Pick presets

    Tick the presets you need: recommended (core ESLint), typescript (typescript-eslint), react, node, vue, or minimal. The output composes them in the right order automatically.

  2. 2

    Configure language options

    Choose ESM or CJS output, set ecmaVersion and sourceType, and edit globalIgnores so build folders and node_modules never get linted.

  3. 3

    Add custom rules

    Click Add Rule to override or extend preset rules. The autocomplete suggests popular rule names like no-console, eqeqeq, and react-hooks/exhaustive-deps.

  4. 4

    Define file-glob overrides

    Add overrides to relax rules in test files, scripts, or generated code. Each override applies a different rule set to a glob like **/*.test.ts.

  5. 5

    Migrate or copy

    Switch to the Migrate tab to paste an existing .eslintrc and see the flat-config equivalent, including notes on env, parser, and overrides translation. Copy the result quickly.

Questions and answers

What is ESLint Flat Config Builder?
Flat config is the eslint.config.js format ESLint 9 uses instead of .eslintrc: one exported array of config objects, each optionally scoped by file globs. This builder composes it from presets, custom rules, overrides and ignores, outputs ESM or CommonJS, and migrates a pasted .eslintrc into flat-config blocks.
Can it migrate my legacy .eslintrc?
Yes. Switch to the Migrate tab and paste an .eslintrc.json or module.exports = {...} file. The tool translates extends, env, plugins, rules, and overrides into flat-config blocks.
Does it support type-aware linting?
Yes. When the typescript preset is selected, you can opt into type-aware rules. Output uses tseslint.configs.recommendedTypeChecked instead of recommended.
Does it send my data to a server?
No. All preset composition and migration happens client-side in your browser. Your existing .eslintrc never leaves the page.
Why ESM output by default?
Flat config is ESM-first. CJS output is offered for projects without type: module, but ESM is recommended for ESLint 9+ and pairs cleanly with modern toolchains.
For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/eslint-flat-config-builder/

For automation planning, fetch the canonical contract at /api/tool/eslint-flat-config-builder.json.