What is ESLint flat config?

ESLint flat config is the new configuration system introduced in ESLint v9. It uses a single eslint.config.js (or .mjs/.cjs) file instead of the old .eslintrc.* files. Flat config provides a simpler, more explicit way to configure ESLint using JavaScript, with native support for ES modules.

Do I need to install additional packages?

Yes — the generated config includes an npm install command at the top listing all required packages. For TypeScript projects you'll need typescript-eslint; for React you'll need eslint-plugin-react-hooks and eslint-plugin-react-refresh; for Prettier you'll need eslint-config-prettier.

Is the generated config compatible with ESLint 9?

Yes. All generated configs use the flat config format which is the default in ESLint 9+. If you're on ESLint 8, you can use flat config by setting ESLINT_USE_FLAT_CONFIG=true or using the --flag unstable_config_lookup_from_file flag.

What is the difference between the rule presets?

Recommended enables ESLint's recommended rule set — a safe baseline for most projects. Strict adds additional opinionated rules that catch more potential issues (e.g., typescript-eslint strict mode). Minimal disables most rules and only enables a small set of critical checks, ideal for gradually adopting ESLint in an existing codebase.

Can I use this config with Next.js App Router?

Yes. The Next.js preset includes the official @next/eslint-plugin-next plugin with core-web-vitals rules, and disables the no-img-element rule for App Router projects. TypeScript support is included by default for Next.js.

Is this tool free and does it store my config?

Completely free and 100% client-side. No data is sent to a server — the config is generated entirely in your browser. Nothing is stored or logged.

ESLint 9 Flat Config Ready

Generate Your
eslint.config.js

Stop copy-pasting ESLint configs. Pick your framework, toggle TypeScript and Prettier, choose a rule preset — download a ready-to-use flat config in seconds.

⚡

Instant Generation

Configure your options and get a valid eslint.config.js or eslint.config.mjs with correct imports and plugins instantly.

🔧

Framework-Specific Rules

Includes React Hooks, React Refresh, Vue, and Next.js-specific plugin configs out of the box.

🎯

TypeScript & Prettier

Toggle TypeScript support with typescript-eslint and Prettier integration with a single click.

Configuration Options

Framework

Rule Preset

Safe baseline rules for most projects

TypeScripttypescript-eslint

Prettier Integrationeslint-config-prettier

Install:

npm install --save-dev eslint @eslint/js globals typescript-eslint eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-config-prettier

eslint.config.ts

// 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 }],
    },
  },
);

Frequently Asked Questions

Everything you need to know about ESLint Flat Config Generator.

Generate Youreslint.config.js