Configuration ESLint Flat
Outils de l'écosystème moderne JavaScript et TypeScript

Générateur Interactif ESLint Flat Config (eslint.config.mjs)

Générez des fichiers de configuration moderne pour ESLint 9+ (eslint.config.mjs / .js) avec prise en charge de TypeScript, React, Next.js, Vue, Prettier et de règles sur mesure.

Zéro envoi sur serveur
TypeScript ESLint v8+
Préréglages :
Paramètres ESLint Flat Config
// ============================================================================
// 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,
);
Plugins Flat ActifsChargés
8 Plugins

Imports de tableaux Flat Config natifs sans conflit d'analyseur.

Directives de RèglesActives
10 Directives

Règles granulaires de style de code, d'imports inutilisés et de typage strict.

Compatibilité ESLint 9+Grade A+
100% Flat Natif

Zéro obsolescence de l'ancien .eslintrc ; entièrement certifié.

Paradigme Flat Config ESLint 9+

Génère des configurations plates modernes en tableau sans les ambiguïtés d'héritage ni les conflits de l'ancien .eslintrc.

Zéro Télémétrie Serveur

Toutes les détections et synthèses de configuration sont opérées directement dans la mémoire de votre navigateur.

Sécurité de Typage et Sans Conflits

Intégration transparente de typescript-eslint v8 et eslint-config-prettier pour prévenir tout conflit de formatage.

Référence technique et guide d'architecture

Guide Développeur : Générateur Interactif ESLint Flat Config (eslint.config.mjs) — Guide de référence

Générez des fichiers de configuration moderne pour ESLint 9+ (eslint.config.mjs / .js) avec prise en charge de TypeScript, React, Next.js, Vue, Prettier et de règles sur mesure.

Paramètres clés et contrôles

Environnements d'Exécution et Variables Globalesstring[]

Définit les variables globales d'exécution via le paquet npm 'globals' (ex. globals.browser, globals.node) dans languageOptions.globals.

Par défaut : ['browser', 'node']
Intégrations de Frameworks et Préréglagesstring[]

Sélectionne les jeux de règles officiels tels que typescript-eslint, React, React Hooks, Next.js, Vue et Prettier.

Par défaut : ['typescript', 'react', 'prettier']
Motifs de Fichiers Cibles (files)string[]

Motifs glob définissant les répertoires et fichiers auxquels s'applique ce bloc de configuration spécifique.

Par défaut : ['**/*.{js,mjs,cjs,ts,jsx,tsx}']
Exclusions Globales (ignores)string[]

Remplace le fichier obsolète .eslintignore par un tableau global d'exclusions appliqué à l'ensemble du projet.

Par défaut : ['dist/**', 'build/**', '.next/**', 'node_modules/**']
Options du Linter (linterOptions)object

Configure le comportement interne du moteur comme reportUnusedDisableDirectives et noInlineConfig.

Par défaut : { reportUnusedDisableDirectives: 'warn' }

Conseils de pro et bonnes practices

Dans Flat Config

Dans Flat Config, tout objet ne comportant que la propriété 'ignores' sans motif 'files' fait office d'exclusion globale universelle pour tout le dépôt, remplaçant .eslintignore.

Utilisez le helper tseslint.config()

Envelopper votre tableau d'export avec tseslint.config(...) fourni par typescript-eslint active l'autocomplétion et le typage strict dans votre fichier eslint.config.mjs.

Ajoutez toujours

Ajoutez toujours eslint-config-prettier comme tout dernier élément du tableau pour désactiver efficacement les règles de style en conflit avec le formatage.

Si un plugin tiers ne fournit pas

Si un plugin tiers ne fournit pas encore d'exportation Flat Config native, instanciez FlatCompat({ baseDirectory: import.meta.dirname }) depuis @eslint/eslintrc pour assurer la transition.

Pièges courants et dépannage

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

Avec Flat Config, 'plugins' doit être un objet associant des préfixes aux instances importées des plugins (ex. { react: reactPlugin }), et non plus un tableau de chaînes de caractères.

Les règles basées sur les types échouent : 'tsconfig.json was not found'

Activez languageOptions.parserOptions.projectService: true et restreignez strictement ces règles aux fichiers TypeScript à l'aide de la propriété 'files'.

Les variables globales comme 'window' ou 'process' déclenchent l'erreur 'no-undef'

Flat Config supprime les environnements implicites. Installez le paquet 'globals' et injectez les environnements nécessaires (ex. ...globals.browser) dans languageOptions.globals.

Foire aux questions (FAQ)

Quelle est la différence fondamentale entre Flat Config et l'ancien format .eslintrc ?▼

Flat Config utilise des modules ES standards (export default [...]) évalués séquentiellement, remplaçant l'héritage en cascade complexe et les plugins chargés magiquement par des chaînes de caractères.

Pourquoi privilégier eslint.config.mjs plutôt que eslint.config.js ?▼

Si le fichier package.json ne précise pas 'type': 'module', l'extension .mjs garantit que Node.js interprète le fichier comme un module ES, autorisant ainsi l'emploi direct des instructions import et export.

Le fichier .eslintignore est-il encore pris en compte dans ESLint 9+ ?▼

Non. ESLint 9 ignore le fichier .eslintignore par défaut. Les exclusions doivent désormais figurer directement dans la propriété 'ignores' de votre fichier Flat Config.

Comment configurer Next.js 14 et 15 avec ESLint Flat Config ?▼

Importez directement @next/eslint-plugin-next ou utilisez FlatCompat pour étendre la configuration 'next/core-web-vitals' en attendant la généralisation des préréglages natifs dans Next.js.

Peut-on temporairement exécuter ESLint 9 en mode hérité .eslintrc ?▼

Oui, en définissant la variable d'environnement ESLINT_USE_FLAT_CONFIG=false, vous pouvez continuer à utiliser l'ancien format .eslintrc le temps d'effectuer la migration.

Outils et utilitaires connexes

Tous les outils →