ESLint Flat Config
Modern JavaScript & TypeScript Ecosystem Tooling

ESLint Flat Config (eslint.config.mjs) Interactive Builder

Generate modern ESLint 9+ flat configuration files (eslint.config.mjs / .js) with TypeScript, React, Next.js, Vue, Prettier, and custom plugin rules.

Zero-Server Upload
TypeScript ESLint v8+
Presets:
ESLint Flat Config Parameters
// ============================================================================
// ESLint 9+ Flat Configuration File
// Generated by ToolsAA ESLint Flat Config Builder (https://toolsaa.com)
// Format: ESM (eslint.config.mjs)
// ============================================================================

import js from "@eslint/js";
import tseslint from "typescript-eslint";
import nextPlugin from "@next/eslint-plugin-next";
import jsxA11y from "eslint-plugin-jsx-a11y";
import simpleImportSort from "eslint-plugin-simple-import-sort";
import unusedImports from "eslint-plugin-unused-imports";
import tailwind from "eslint-plugin-tailwindcss";
import prettier from "eslint-config-prettier";
import globals from "globals";

export default tseslint.config(
  // 1. Global Ignores
  {
    ignores: [
      "node_modules/**",
      ".next/**",
      "out/**",
      "dist/**",
      "build/**",
      "coverage/**",
      "*.config.js",
      "*.config.mjs",
    ],
  },

  // 2. Base ESLint Recommended Rules
  js.configs.recommended,

  // 3. TypeScript Rules
  ...tseslint.configs.recommendedTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },

  // 4. Next.js 15 App Router Integration
  {
    files: ["**/*.{js,jsx,mjs,ts,tsx}"],
    plugins: {
      "@next/next": nextPlugin,
      "jsx-a11y": jsxA11y,
    },
    rules: {
      ...nextPlugin.configs.recommended.rules,
      ...nextPlugin.configs["core-web-vitals"].rules,
      ...jsxA11y.configs.recommended.rules,
    },
  },

  // 5. Tailwind CSS Class Sorting & Linting
  ...tailwind.configs["flat/recommended"],

  // 7. Environment & Runtime Globals
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        ...globals.es2024,
      },
    },
  },

  // 8. Custom Rules & Directives
  {
    plugins: {
      "simple-import-sort": simpleImportSort,
      "unused-imports": unusedImports,
    },
    rules: {
      "no-console": "warn",
      "prefer-const": "error",
      "@typescript-eslint/no-unused-vars": [
        "warn",
        {
          argsIgnorePattern: "^_",
          varsIgnorePattern: "^_",
          caughtErrorsIgnorePattern: "^_",
        },
      ],
      "@typescript-eslint/no-explicit-any": "warn",
      "react-hooks/exhaustive-deps": "warn",
      "simple-import-sort/imports": "error",
      "simple-import-sort/exports": "error",
      "unused-imports/no-unused-imports": "error",
      "@next/next/no-html-link-for-pages": "error",
      "@next/next/no-img-element": "warn",
    },
  },

  // 9. Prettier Formatting Harmony (Must remain at the very end to disable conflicting rules)
  prettier,
);
Active Flat PluginsLoaded
8 Plugins

Native Flat Config array imports with zero parser conflict.

Configured Rule DirectivesActive
10 Directives

Granular code styling, unused imports and type safety rules.

ESLint 9+ CompatibilityGrade A+
100% Flat Native

Zero legacy .eslintrc deprecations; fully inspected & certified.

ESLint 9+ Flat Config Paradigm

Generates modern array-based flat configs without legacy .eslintrc cascading issues or hidden parser overrides.

Zero Build-Chain Telemetry

All package.json analysis, rule composition, and code generation occur entirely in-browser with zero server uploads.

Type-Safe & Conflict-Free

Fully integrates typescript-eslint v8 and eslint-config-prettier to guarantee zero rule collisions with formatters.

Technical Reference & Architecture Guide

ESLint Flat Config (eslint.config.mjs) Interactive Builder — Reference Guide

Generate modern ESLint 9+ flat configuration files (eslint.config.mjs / .js) with TypeScript, React, Next.js, Vue, Prettier, and custom plugin rules.

Key Parameters & Controls

Target Runtime & Environmentstring[]

Configures global variable scopes via the 'globals' npm package (e.g., globals.browser, globals.node) within languageOptions.globals.

Default: ['browser', 'node']
Framework & Preset Integrationsstring[]

Enables modular preset configurations including typescript-eslint, React, React Hooks, Next.js, Vue, and Prettier.

Default: ['typescript', 'react', 'prettier']
Target File Patterns (files)string[]

Glob matching patterns that define exactly which files and directories this configuration block applies to.

Default: ['**/*.{js,mjs,cjs,ts,jsx,tsx}']
Global Ignores (ignores)string[]

Project-wide ignore patterns that replace the legacy .eslintignore file across the entire repository.

Default: ['dist/**', 'build/**', '.next/**', 'node_modules/**']
Linter Options (linterOptions)object

Controls engine-level behaviors such as reporting unused eslint-disable directives or prohibiting inline rule comments.

Default: { reportUnusedDisableDirectives: 'warn' }

Pro Tips & Best Practices

In Flat Config

In Flat Config, any configuration object containing only an 'ignores' key without a 'files' selector functions as a universal global ignore, directly substituting .eslintignore.

Leverage the tseslint.config() Helper

Wrapping your export array with tseslint.config(...) from typescript-eslint provides complete TypeScript type checking, autocompletion, and safe config composition.

Always place eslint-config-prettier

Always place eslint-config-prettier as the final item in the export array so it overrides and disables all conflicting stylistic formatting rules.

Bridge Legacy Plugins Using FlatCompat

For older plugins that do not yet export native Flat Config presets, instantiate FlatCompat from @eslint/eslintrc using import.meta.dirname to retain full compatibility.

Common Gotchas & Troubleshooting

TypeError: Key 'plugins' is expected to be an object

In Flat Config, 'plugins' must be an object mapping namespace identifiers to imported plugin instances (e.g., { react: reactPlugin }), rather than an array of plugin name strings.

Type-aware lint rules fail with 'tsconfig.json was not found'

Configure languageOptions.parserOptions.projectService: true (or project: true) and restrict those rules strictly to TypeScript files using the 'files' glob property.

Standard globals like 'window' or 'process' trigger 'no-undef' errors

Flat Config eliminates implicit environments. Install the 'globals' package and spread the desired environment sets (e.g., ...globals.browser) into languageOptions.globals.

Frequently Asked Questions

What is the primary difference between Flat Config and legacy .eslintrc?▼

Flat Config uses standard ECMAScript modules (export default [...]) evaluated sequentially, eliminating nested cascading inheritance, hidden global scope pollution, and magic string plugin resolution.

Why use eslint.config.mjs instead of eslint.config.js?▼

If your project's package.json does not define 'type': 'module', using the .mjs extension forces Node.js to evaluate the configuration as an ES module, allowing top-level import and export statements.

Does ESLint 9+ still read legacy .eslintignore files?▼

No. ESLint 9 ignores .eslintignore by default unless legacy flags are set. All exclusion rules must be declared inside the 'ignores' array in your flat configuration file.

How do I configure Next.js 14 and 15 with ESLint Flat Config?▼

Import @next/eslint-plugin-next directly and assign its recommended rules, or use FlatCompat to extend 'next/core-web-vitals' until native Flat Config presets are finalized.

Can I temporarily continue running ESLint in legacy mode?▼

Yes. You can set the environment variable ESLINT_USE_FLAT_CONFIG=false to run ESLint 9 in legacy .eslintrc mode while migrating your project.

Related Tools & Utilities

All Tools →