ESLint Config Generator

New project, npx eslint --init asks you 8 questions and generates a config that immediately throws 200 errors because you picked “Airbnb” but your project uses tabs. You switch to the ESLint docs to hand-write a config — but now you need to figure out which plugins to install for React + TypeScript, whether to use the legacy .eslintrc.json or the new flat config format, and which of the 300+ built-in rules to enable. You need a generator that lets you toggle rules visually and gives you the config file + install command.

Why This Generator (Not the ESLint Rule Tester)

PureDevTools has an ESLint Rule Tester for writing and testing custom rule logic against code snippets. This tool is for generating complete ESLint configuration files — pick your environment (browser, Node, both), framework (React, Vue, vanilla), style preset, toggle individual rules, and get a ready-to-use .eslintrc.json or eslint.config.js with the exact npm install command. Everything runs in your browser; no data is sent anywhere.

What Is ESLint?

ESLint is the most widely used JavaScript and TypeScript linter. It statically analyzes your code to find problems, enforce coding conventions, and prevent common bugs — before you run your code. Unlike formatters such as Prettier, ESLint understands code semantics: it can detect unreachable branches, unused variables, dangerous patterns like eval, and framework-specific anti-patterns.

A well-configured ESLint setup catches real bugs in CI before they reach production, enforces team coding standards without code review churn, and provides IDE feedback as you type.

This tool generates a complete ESLint configuration file — either the legacy .eslintrc.json format or the new eslint.config.js flat config — based on your selections. It also outputs the exact npm install command needed for your chosen plugins.

How to Use This Tool

1. Choose a format — select .eslintrc.json for ESLint v7/v8 compatibility or eslint.config.js for ESLint 9+ flat config.
2. Select a framework preset — choose Vanilla JS/TS, React, Vue, or Next.js to include framework-appropriate rules and settings.
3. Pick your environments — check Browser and/or Node.js to declare which globals ESLint should recognize.
4. Enable rule categories — toggle Possible Errors, Best Practices, Stylistic, and ES6+ rule groups.
5. Add plugins — check TypeScript, React, Import, or Prettier plugin integration.
6. Edit ignore patterns — adjust the paths ESLint should skip (one glob per line).
7. Copy the output — use the install command to add dependencies, then copy the config file into your project root.

All processing happens in your browser. Nothing is sent to a server.

Config Format: Legacy vs Flat

.eslintrc.json (Legacy Format)

The legacy format has been the standard since ESLint v1. It uses a JSON object with env, extends, parser, plugins, and rules keys. ESLint cascades configuration files up the directory tree, merging configs from parent directories.

{
  "env": { "browser": true, "es2024": true },
  "extends": ["eslint:recommended"],
  "rules": {
    "no-console": "warn",
    "prefer-const": "warn"
  }
}

When to use: If your project currently uses ESLint v7 or v8, or if you rely on shareable configs that have not been updated for flat config.

eslint.config.js (Flat Config, ESLint 9+)

Flat config is the new default in ESLint v9. It uses a JavaScript file exporting an array of config objects. Each object can target specific files and has explicit plugin registration — no more magic plugin name resolution.

import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    rules: {
      "no-console": "warn",
      "prefer-const": "warn",
    },
  },
];

When to use: All new projects. Flat config is simpler, more predictable, and will be the only format supported in future ESLint versions.

Environments

Environments tell ESLint which global variables exist in your runtime. Without declaring environments, ESLint flags uses of window, document, process, or fetch as undefined variables.

You can select multiple environments. In flat config, globals come from the globals package and are merged into languageOptions.globals.

Rule Categories

Possible Errors

Rules in this category catch code that is almost certainly a bug or will cause a runtime error:

Best Practices

Rules that enforce code quality and prevent common mistakes:

Stylistic

Code style rules — useful without Prettier, but should be disabled if you use Prettier for formatting (use eslint-config-prettier to turn them off):

ES6+

Rules promoting modern JavaScript syntax:

Plugin Integration

@typescript-eslint

Replaces the default ESLint parser with @typescript-eslint/parser, which understands TypeScript syntax including generics, type annotations, and decorators. Adds TypeScript-specific rules:

• @typescript-eslint/no-explicit-any — warns on any type usage
• @typescript-eslint/no-unused-vars — TypeScript-aware unused variable detection
• @typescript-eslint/no-non-null-assertion — warns on ! non-null assertions

When TypeScript is enabled, the base no-unused-vars rule is disabled to avoid false positives on TypeScript-specific constructs.

Required packages:

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

eslint-plugin-react

Adds React-specific rules for JSX and React component patterns:

• react/no-unknown-property — catches invalid HTML attributes in JSX
• react/jsx-uses-vars — prevents React component imports being marked as unused
• react/react-in-jsx-scope: off — not needed in React 17+ with new JSX transform
• react/prop-types: off — disabled when using TypeScript (types cover this)

Required packages:

npm install --save-dev eslint-plugin-react

eslint-plugin-import

Lints ES module import/export declarations:

• Warns on missing modules or unresolved imports
• Catches circular dependencies and duplicate imports
• Enforces consistent import ordering (configure separately)

Required packages:

npm install --save-dev eslint-plugin-import

eslint-config-prettier

Disables ESLint rules that conflict with Prettier’s formatting decisions. This is not a plugin that runs Prettier — it just turns off the ESLint rules that Prettier handles (spacing, semicolons, quotes, trailing commas, etc.).

Add this after all other extends entries or at the end of your flat config array so it takes precedence.

Required packages:

npm install --save-dev eslint-config-prettier prettier

Framework-Specific Notes

React

Adds eslint-plugin-react with plugin:react/recommended rules and configures ecmaFeatures.jsx: true for JSX parsing. In flat config, the react plugin is registered explicitly. Set react.version: "detect" in settings so the plugin reads your installed React version automatically.

Vue

Select Vue to configure the parser and base plugin. You will need to add eslint-plugin-vue manually to your project — this generator outputs the configuration structure but the Vue plugin is not directly included.

Next.js

Extends the Next.js ESLint config (eslint-config-next) which bundles core-web-vitals rules for performance (@next/next/no-html-link-for-pages, @next/next/no-img-element), React rules, and accessibility rules. Uses the flat config @next/eslint-plugin-next in ESLint 9 mode.

Common ESLint Configurations

TypeScript React project (flat config)

import js from "@eslint/js";
import tsPlugin from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import reactPlugin from "eslint-plugin-react";
import prettierConfig from "eslint-config-prettier";
import globals from "globals";

export default [
  { ignores: ["node_modules", "dist"] },
  js.configs.recommended,
  {
    files: ["**/*.ts", "**/*.tsx"],
    plugins: { "@typescript-eslint": tsPlugin },
    languageOptions: { parser: tsParser },
    rules: { ...tsPlugin.configs.recommended.rules },
  },
  {
    plugins: { react: reactPlugin },
    settings: { react: { version: "detect" } },
    rules: { ...reactPlugin.configs.recommended.rules },
  },
  prettierConfig,
  {
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      globals: { ...globals.browser, ...globals.es2024 },
    },
    rules: {
      "no-console": "warn",
      "prefer-const": "warn",
    },
  },
];

Node.js CLI tool

{
  "env": { "node": true, "es2024": true },
  "extends": ["eslint:recommended"],
  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
  "rules": {
    "no-console": "off",
    "no-process-exit": "warn",
    "prefer-const": "warn",
    "no-var": "error"
  },
  "ignorePatterns": ["node_modules", "dist"]
}

Frequently Asked Questions

Q: What is the difference between .eslintrc.json and eslint.config.js? A: .eslintrc.json is the legacy format, supported by ESLint v7 and v8. eslint.config.js is the new flat config format, the default in ESLint v9. Flat config is simpler, more explicit, and is the future of ESLint configuration. New projects should use flat config.

Q: Does ESLint work with TypeScript? A: Yes, but you need @typescript-eslint/parser and @typescript-eslint/eslint-plugin. Enable the TypeScript plugin in this generator and it will configure both automatically.

Q: Can ESLint and Prettier run together? A: Yes. Use eslint-config-prettier (the Prettier plugin checkbox in this tool) to disable ESLint’s formatting rules. Run Prettier for code formatting, ESLint for code quality. Never configure ESLint to also run Prettier as a rule — that creates slow, confusing error messages.

Q: What does eslint:recommended include? A: eslint:recommended enables a subset of core ESLint rules that catch common bugs: no-undef, no-unused-vars, no-console, no-debugger, and others. The full list is in the ESLint rules documentation. This generator uses it as the base and adds additional rule categories on top.

Q: Why do I need globals package for flat config? A: In flat config, ESLint does not have built-in environment globals. The globals npm package provides the same sets (globals.browser, globals.node, globals.es2024), which you spread into languageOptions.globals. This generator includes the install command for it automatically.

Q: Should I commit .eslintrc.json to version control? A: Yes. Your ESLint configuration is part of your project’s coding standards and should be committed so every developer and CI system uses the same rules.

Q: Is my ESLint configuration data sent to a server? A: No. All configuration generation happens entirely in your browser. No data is sent anywhere.