Why does this generate a "flat config" instead of .eslintrc?

ESLint 9 made flat config (eslint.config.js exporting an array of config objects) the default format, deprecating the older .eslintrc JSON/YAML/JS cascading format. New projects should use flat config since that's what current ESLint versions and plugin ecosystems are built around.

Why can't I enable react-hooks or jsx-a11y with the Node or TypeScript preset?

Both plugins only make sense for React code: react-hooks lints the Rules of Hooks, and jsx-a11y lints accessibility issues in JSX markup. Enabling them outside a React project would add rules that never match anything in the codebase, so the tool blocks that combination with a clear error instead of producing a confusing config.

Do I need to install the plugins this config imports?

Yes. The generated config only produces the eslint.config.js file; you still need to `npm install --save-dev` whichever of @eslint/js, typescript-eslint, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y, eslint-plugin-import, or globals correspond to the options you selected.

Can I add my own custom rules?

Yes, the rule override rows let you set any rule name to "off", "warn", or "error", appended as a final config object so it takes precedence over the preset defaults.

ESLint 9 Flat Config Generator (eslint.config.js)

Overview

Introduction

ESLint 9 replaced the long-standing .eslintrc cascading config format with flat config, an exported array of plain config objects, and while it's more predictable, hand-writing the import statements and array ordering for a new project is easy to get wrong.

This tool generates a working eslint.config.js from a base preset plus a handful of common plugin toggles and custom rule overrides.

What Is ESLint Flat Config Generator?

An ESLint 9 flat config generator with three base presets (React, Node, TypeScript), plugin toggles for react-hooks, eslint-plugin-import, and jsx-a11y, and a rule-override list for setting individual rules to off/warn/error.

The output is real, importable JavaScript: `import` statements for exactly the plugins you enabled, followed by `export default [...]` containing each plugin's recommended config in the order ESLint expects.

How ESLint Flat Config Generator Works

Choosing a base preset selects the matching recommended config (`js.configs.recommended`, plus `tseslint.configs.recommended` for TypeScript, or `react.configs.flat.recommended` plus Node globals for the others).

Each enabled plugin toggle appends its own import line and recommended config entry to the array in a stable order, and any rule overrides you add are appended last as their own config object so they take precedence over the preset defaults.

When To Use ESLint Flat Config Generator

Use it when setting up ESLint from scratch on a new project and you want a correct flat config for your stack without researching each plugin's flat-config export shape.

It's also useful when migrating an existing .eslintrc-based project to ESLint 9's flat config format, as a starting point to adapt your existing rule customizations onto.

Often used alongside Prettier Config Generator, tsconfig.json Generator and lint-staged Config Generator.

Features

Advantages

Produces real flat-config JavaScript, not the deprecated .eslintrc format, matching what ESLint 9+ expects by default.
Blocks nonsensical combinations (React-only plugins on a Node/TypeScript preset) with a clear error instead of silently producing a broken config.
Rule overrides are appended as their own config object, so they cleanly take precedence over preset defaults without needing to edit the preset's block.

Limitations

Doesn't install the plugin packages for you; each enabled plugin needs a matching `npm install --save-dev` before ESLint will run.
Covers common presets and plugin combinations; a highly customized monorepo setup with per-folder overrides needs manual adjustment beyond this output.

Examples

React + TypeScript-style config with react-hooks

Input

basePreset: react, reactHooks: true, jsxA11y: false, importPlugin: false

Output

import js from "@eslint/js";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";

export default [
  js.configs.recommended,
  react.configs.flat.recommended,
  reactHooks.configs["recommended-latest"],
];

Selecting React with react-hooks enabled but jsx-a11y and import disabled produces only the imports and config entries those two plugins need.

Best Practices & Notes

Best Practices

Enable jsx-a11y for any user-facing React app; it catches missing alt text, invalid ARIA attributes, and other accessibility regressions before code review.
Keep custom rule overrides in their own config object at the end of the array (as this tool does) rather than editing the preset's block, so upgrading the preset later doesn't silently drop your customizations.
Pair this with the Prettier Config Generator and turn off ESLint's own formatting rules, letting Prettier own formatting and ESLint own code-quality rules.

Developer Notes

The generator emits plugin imports and config array entries in a fixed, deterministic order (base recommended config first, then react/react-hooks/jsx-a11y, then eslint-plugin-import, then a Node globals block, then rule overrides last) so the same options always produce byte-identical output. The Node preset uses the `globals` package's `globals.node` object rather than hand-listing global identifiers like `process` and `require`, matching common flat-config examples in ESLint's own documentation.

ESLint Flat Config Generator Use Cases

Bootstrapping ESLint 9 flat config for a new React, Node, or TypeScript project
Migrating an existing .eslintrc-based project to flat config as a starting template
Quickly toggling react-hooks/jsx-a11y/import plugin rules on or off while evaluating which linting setup a team wants

Common Mistakes

Copying an old .eslintrc `extends` array style config into ESLint 9, which flat config no longer reads by default without a compatibility shim.
Enabling react-hooks or jsx-a11y on a Node-only backend project, adding rules that will never fire on any file in the codebase.

Tips

Run the Prettier Config Generator next and disable ESLint stylistic rules that would otherwise conflict with Prettier's formatting.

ESLint Flat Config Generator