ESLint config generator for flat config (eslint.config.js)

How to use the ESLint config generator

1. Tick TypeScript (typescript-eslint), React and React Hooks and Next.js (eslint-config-next) as they apply. Next.js already includes the React rules.
2. Choose Runs in: Browser, Node.js or Both.
3. Leave Turn off rules that conflict with Prettier ticked if you format with Prettier.
4. Edit Ignore patterns, for example dist/**, coverage/**.
5. Run the Install command, save the file as eslint.config.js and run npx eslint ..

What it does and when to use it

ESLint finds bugs and risky patterns before you run the code. Since ESLint 9 its configuration is one JavaScript file that exports an array of config objects. Many guides still show .eslintrc.json, which ESLint 10 ignores.

Use it when you add linting to a project, upgrade from an old ESLint version, or add TypeScript to a JavaScript codebase. It works with the formatting file from the Prettier config generator and the compiler settings from the tsconfig generator. Commit messages can be linted too, with the commitlint config generator.

How it works

The generated array is built in a fixed order, because later entries override earlier ones:

1. globalIgnores([...]) with your patterns. Commas inside braces, as in *.{js,ts}, do not split a pattern.
2. A block that applies js.configs.recommended to the matching file types and sets globals from the globals package.
3. tseslint.configs.recommended when TypeScript is ticked. With Next.js it is left out, because eslint-config-next/typescript already loads typescript-eslint and loading it twice can fail with “Cannot redefine plugin”.
4. React: react.configs.flat.recommended, the jsx-runtime config for React 17+ and reactHooks.configs.flat.recommended. Or, for Next.js, eslint-config-next/core-web-vitals (and its TypeScript config).
5. A rules block with one example override for unused variables.
6. eslint-config-prettier/flat, last.

The install command lists exactly the packages your imports need. See the official guide to configuration files for every key.

Worked examples

TypeScript in Node.js with Prettier (default).

  {
    files: ["**/*.{js,mjs,cjs,ts}"],
    // ESLint's recommended rules
    extends: [js.configs.recommended],
    languageOptions: { globals: globals.node },
  },
  // Type-aware rules are available too: tseslint.configs.recommendedTypeChecked
  tseslint.configs.recommended,

Install: npm install --save-dev eslint @eslint/js globals typescript-eslint typescript eslint-config-prettier.

React in the browser, plain JavaScript, no Prettier. The files pattern becomes **/*.{js,mjs,cjs,jsx}, globals switch to globals.browser, and the React lines include react.configs.flat["jsx-runtime"] with settings: { react: { version: "detect" } }.

Next.js with TypeScript. Ignore patterns .next/**, out/** produce globalIgnores([".next/**", "out/**"]), and the array spreads ...nextVitals and ...nextTs.

Limits and tips

• Type-aware rules are off. They catch more, such as unhandled promises, but need your tsconfig and run slower. The comment in the file names the config to switch to.
• Test after Next.js upgrades. Shared configs change between major versions; run npx eslint . and read any config errors.