Configuración ESLint Flat
Herramientas del ecosistema moderno JavaScript y TypeScript

Constructor interactivo de ESLint Flat Config (eslint.config.mjs)

Genera archivos de configuración plana modernos para ESLint 9+ (eslint.config.mjs / .js) con soporte para TypeScript, React, Next.js, Vue, Prettier y reglas personalizadas.

Cero subidas al servidor
TypeScript ESLint v8+
Plantillas:
Parámetros de 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 ActivosCargados
8 Complementos

Importaciones de matriz Flat Config nativas sin conflicto de analizador.

Directivas de ReglasActivas
10 Directivas

Reglas granulares de estilo de código, importaciones no utilizadas y seguridad de tipos.

Compatibilidad ESLint 9+Grade A+
100% Flat Nativo

Cero advertencias de desuso de .eslintrc; completamente certificado.

Paradigma Flat Config de ESLint 9+

Genera configuraciones planas modernas basadas en arrays sin los problemas de cascada del antiguo .eslintrc.

Cero Telemetría en el Servidor

Todo el análisis de dependencias y generación de código se ejecuta de forma privada dentro de su navegador.

Seguro de Tipos y Sin Conflictos

Integra totalmente typescript-eslint v8 y eslint-config-prettier para evitar colisiones con formateadores de código.

Referencia técnica y guía de arquitectura

Guía para Desarrolladores: Generador Interactivo de ESLint Flat Config (eslint.config.mjs) — Guía de referencia

Genera archivos de configuración plana modernos para ESLint 9+ (eslint.config.mjs / .js) con soporte para TypeScript, React, Next.js, Vue, Prettier y reglas personalizadas.

Parámetros clave y controles

Entorno de Ejecución y Variables Globalesstring[]

Define variables globales de entorno usando el paquete npm 'globals' (ej. globals.browser, globals.node) dentro de languageOptions.globals.

Por defecto: ['browser', 'node']
Integración de Frameworks y Presetsstring[]

Selecciona conjuntos de reglas modulares como typescript-eslint, React, React Hooks, Next.js, Vue y Prettier.

Por defecto: ['typescript', 'react', 'prettier']
Patrones de Archivos (files)string[]

Patrones glob que determinan a qué archivos y directorios aplica este bloque de configuración específico.

Por defecto: ['**/*.{js,mjs,cjs,ts,jsx,tsx}']
Exclusiones Globales (ignores)string[]

Reemplaza el archivo obsoleto .eslintignore mediante un array global de exclusiones aplicado a todo el proyecto.

Por defecto: ['dist/**', 'build/**', '.next/**', 'node_modules/**']
Opciones del Linter (linterOptions)object

Controla directivas a nivel de motor como reportUnusedDisableDirectives y noInlineConfig.

Por defecto: { reportUnusedDisableDirectives: 'warn' }

Consejos profesionales y mejores prácticas

En Flat Config

En Flat Config, un objeto que solo contiene la clave 'ignores' sin un selector 'files' opera como exclusión global para todo el repositorio, reemplazando a .eslintignore.

Envolver el array de configuración con

Envolver el array de configuración con tseslint.config(...) de typescript-eslint proporciona autocompletado y tipado estricto en tu eslint.config.mjs.

Ubica siempre eslint-config-prettier

Ubica siempre eslint-config-prettier como el último elemento del array para desactivar eficazmente todas las reglas de formato que entren en conflicto.

Si un plugin antiguo aún no ofrece

Si un plugin antiguo aún no ofrece soporte nativo para Flat Config, crea una instancia de FlatCompat({ baseDirectory: import.meta.dirname }) de @eslint/eslintrc para adaptarlo.

Errores comunes y solución de problemas

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

En Flat Config, 'plugins' debe ser un objeto que mapee nombres a las instancias importadas de los plugins (ej. { react: reactPlugin }), no un array de cadenas de texto.

Las reglas con reconocimiento de tipos fallan al no encontrar 'tsconfig.json'

Configura languageOptions.parserOptions.projectService: true y limita estas reglas exclusivamente a archivos TypeScript mediante el patrón 'files'.

Variables estándar como 'window' o 'process' generan advertencias 'no-undef'

Flat Config eliminó los entornos implícitos. Instala el paquete 'globals' y expande las propiedades requeridas (ej. ...globals.browser) dentro de languageOptions.globals.

Preguntas frecuentes (FAQ)

¿Cuál es la principal diferencia entre Flat Config y el formato clásico .eslintrc?▼

Flat Config utiliza módulos estándar ECMAScript (export default [...]) evaluados secuencialmente, eliminando la cascada jerárquica opaca y los plugins resueltos mágicamente por cadenas de texto.

¿Por qué utilizar eslint.config.mjs en lugar de eslint.config.js?▼

Si el archivo package.json no incluye 'type': 'module', la extensión .mjs garantiza que Node.js interprete el archivo como módulo ES, permitiendo sentencias import y export nativas.

¿ESLint 9+ sigue reconociendo el archivo .eslintignore?▼

No. ESLint 9 ignora .eslintignore por defecto. Todas las exclusiones deben definirse mediante la propiedad 'ignores' dentro del archivo de configuración plana.

¿Cómo se configura Next.js 14 y 15 con ESLint Flat Config?▼

Puedes importar directamente @next/eslint-plugin-next o utilizar FlatCompat para extender la configuración 'next/core-web-vitals' hasta que los presets nativos estén disponibles de forma predeterminada.

¿Se puede seguir ejecutando ESLint en modo heredado temporalmente?▼

Sí, es posible definir la variable de entorno ESLINT_USE_FLAT_CONFIG=false para ejecutar ESLint 9 en modo de compatibilidad .eslintrc durante el proceso de migración.

Herramientas y utilidades relacionadas

Todas las herramientas →