ESLint Flat Config Builder

ESLint Flat Config Builder

Build modern eslint.config.js with rule presets, plugin imports, file-glob overrides, and ESM output.

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 }
    }
  }
);

What This Tool Does

ESLint Flat Config Builder is built for deterministic developer and agent workflows.

Build modern eslint.config.js (flat config) with rule presets, plugin imports, file-glob overrides, and ESM output. Includes legacy .eslintrc to flat-config migration.

Use How to Use for execution steps and FAQ for constraints, policies, and edge cases.

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

Agent Invocation

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.

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.

Frequently Asked Questions

What is ESLint Flat Config Builder?
A generator for the modern eslint.config.js (flat config) format used by ESLint 9. It composes presets, custom rules, file-glob overrides, and language options into one ESM file.
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.