ESLint Flat Config
Moderne JavaScript- & TypeScript-Ecosystem-Tools

ESLint Flat Config (eslint.config.mjs) Interaktiver Generator

Erstellen Sie moderne ESLint 9+ Flat-Konfigurationsdateien (eslint.config.mjs / .js) mit nativer Unterstützung für TypeScript, React, Next.js, Vue, Prettier und benutzerdefinierte Plugin-Regeln.

Kein Server-Upload
TypeScript ESLint v8+
Vorlagen:
ESLint Flat Config Parameter
// ============================================================================
// 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,
);
Aktive Flat-PluginsGeladen
8 Plugins

Native Flat-Config-Array-Imports ohne Parser-Konflikte.

Konfigurierte RegeldirektivenAktiv
10 Direktiven

Feingranulare Code-Styling-, Import- und Typsicherheitsregeln.

ESLint 9+ KompatibilitätGrade A+
100% Flat Native

Keine veralteten .eslintrc-Warnungen; vollständig geprüft.

ESLint 9+ Flat Config Paradigma

Erzeugt moderne Array-basierte Flat-Configs ohne unvorhersehbare .eslintrc-Vererbungen oder Parser-Konflikte.

Null Server-Uploads

Alle Analysen von package.json und Konfigurationsgenerierungen erfolgen vollständig lokal im Browser.

Typsicher & Konfliktfrei

Vollständige Integration von typescript-eslint v8 und eslint-config-prettier zur Vermeidung von Formatierer-Konflikten.

Technische Referenz & Architektur-Leitfaden

ESLint Flat Config (eslint.config.mjs) Interaktiver Konfigurator Leitfaden — Referenz-Leitfaden

Erstellen Sie moderne ESLint 9+ Flat-Konfigurationsdateien (eslint.config.mjs / .js) mit nativer Unterstützung für TypeScript, React, Next.js, Vue, Prettier und benutzerdefinierte Plugin-Regeln.

Wichtige Parameter & Steuerelemente

Zielumgebungen & Globale Variablenstring[]

Definiert Laufzeit-Objekte über das 'globals'-Paket (z. B. globals.browser, globals.node) innerhalb von languageOptions.globals.

Standard: ['browser', 'node']
Frameworks & Preset-Integrationenstring[]

Wählt modulare Regelsätze aus (typescript-eslint, React, React Hooks, Next.js, Vue und Prettier).

Standard: ['typescript', 'react', 'prettier']
Dateimuster (files)string[]

Glob-Muster zur exakten Eingrenzung der Dateien, auf die der jeweilige Konfigurationsblock angewendet wird.

Standard: ['**/*.{js,mjs,cjs,ts,jsx,tsx}']
Globale Ausschlüsse (ignores)string[]

Ersetzt die veraltete Datei .eslintignore durch ein globales Ausschluss-Array auf Repository-Ebene.

Standard: ['dist/**', 'build/**', '.next/**', 'node_modules/**']
Linter-Optionen (linterOptions)object

Steuert Linter-Verhalten wie reportUnusedDisableDirectives und noInlineConfig auf Engine-Ebene.

Standard: { reportUnusedDisableDirectives: 'warn' }

Profi-Tipps & Best Practices

In Flat Config dient ein Objekt

In Flat Config dient ein Objekt, das ausschließlich den Schlüssel 'ignores' ohne 'files' enthält, als universeller globaler Ausschluss und ersetzt .eslintignore vollständig.

Den tseslint.config()-Hilfsansatz nutzen

Ummanteln Sie das Konfigurations-Array mit tseslint.config(...) aus typescript-eslint, um TypeScript-Typprüfung und Autovervollständigung für Ihre eslint.config.mjs zu aktivieren.

Fügen Sie eslint-config-prettier

Fügen Sie eslint-config-prettier immer als letztes Element des Arrays ein, damit alle kollidierenden Formatierungsregeln verlässlich deaktiviert werden.

Verwenden Sie new FlatCompat

Verwenden Sie new FlatCompat({ baseDirectory: import.meta.dirname }) aus @eslint/eslintrc, um ältere Plugins ohne native Flat-Config-Unterstützung nahtlos einzubinden.

Häufige Fallstricke & Fehlerbehebung

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

Im Flat-Config-Format muss 'plugins' ein Objekt sein, das Plugin-Namen auf importierte Instanzen abbildet (z. B. { react: reactPlugin }), anstelle eines Arrays aus Namens-Strings.

Typgestützte Regeln melden 'tsconfig.json was not found'

Aktivieren Sie languageOptions.parserOptions.projectService: true und beschränken Sie diese Regeln über das 'files'-Muster strikt auf TypeScript-Dateien.

Globale Variablen wie 'window' oder 'process' werden als 'no-undef' gewertet

Flat Config verzichtet auf implizite Standard-Umgebungen. Installieren Sie das 'globals'-Paket und binden Sie z. B. ...globals.browser in languageOptions.globals ein.

Häufig gestellte Fragen (FAQ)

Was ist der Hauptunterschied zwischen Flat Config und dem alten .eslintrc-Format?▼

Flat Config setzt auf native ES-Module (export default [...]) mit sequenzieller Array-Auswertung. Dies ersetzt die fehleranfällige Kaskadierung und intransparente Vererbung von .eslintrc durch explizite Imports.

Warum sollte man eslint.config.mjs statt eslint.config.js verwenden?▼

Wenn in der package.json kein 'type': 'module' deklariert ist, erzwingt die Dateiendung .mjs die Ausführung als ES-Modul, sodass native import/export-Anweisungen fehlerfrei funktionieren.

Wird die Datei .eslintignore in ESLint 9+ noch berücksichtigt?▼

Nein, ESLint 9 ignoriert .eslintignore standardmäßig. Sämtliche Ausschlussmuster müssen direkt über das 'ignores'-Array in der Flat-Config-Datei definiert werden.

Wie wird Flat Config mit Next.js 14 und 15 eingerichtet?▼

Integrieren Sie @next/eslint-plugin-next direkt oder verwenden Sie FlatCompat, um das Preset 'next/core-web-vitals' einzubinden, bis native Presets vollständig standardisiert sind.

Kann man den alten .eslintrc-Modus vorübergehend weiter nutzen?▼

Ja, durch Setzen der Umgebungsvariable ESLINT_USE_FLAT_CONFIG=false kann ESLint 9 temporär im Legacy-Modus ausgeführt werden.

Verwandte Werkzeuge & Dienstprogramme

Alle Werkzeuge →