Plugins de ESLint

Instala y configura plugins de ESLint para React, TypeScript, accesibilidad, Tailwind CSS y testing.

Receta

Tarjeta de referencia rápida — lista para copiar y pegar.

# Plugins principales (la mayoría ya incluidos en next/core-web-vitals)
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks
 
# TypeScript
npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
 
# Imports
npm install --save-dev eslint-plugin-import
 
# Accesibilidad
npm install --save-dev eslint-plugin-jsx-a11y
 
# Tailwind CSS
npm install --save-dev eslint-plugin-tailwindcss
 
# Testing Library
npm install --save-dev eslint-plugin-testing-library

Cuándo usarlo: Cuando necesitas reglas más allá de lo que proporciona next/core-web-vitals — orden de clases de Tailwind, mejores prácticas de testing o revisiones de accesibilidad más estrictas.

Ejemplo de Funcionamiento

// eslint.config.mjs
import { FlatCompat } from "@eslint/eslintrc";
import tailwindcss from "eslint-plugin-tailwindcss";
import { dirname } from "path";
import { fileURLToPath } from "url";
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
 
const compat = new FlatCompat({ baseDirectory: __dirname });
 
const eslintConfig = [
  // Presets de Next.js (incluye react, react-hooks, import, jsx-a11y)
  ...compat.extends("next/core-web-vitals", "next/typescript"),
 
  // Plugin Tailwind CSS (compatible con flat config nativo)
  ...tailwindcss.configs["flat/recommended"],
 
  // Testing Library (solo para archivos de pruebas)
  {
    files: ["**/*.test.{ts,tsx}", "**/*.spec.{ts,tsx}"],
    ...compat.extends("plugin:testing-library/react")[0],
  },
 
  // Overrides de reglas personalizadas
  {
    rules: {
      // Tailwind
      "tailwindcss/classnames-order": "warn",
      "tailwindcss/no-custom-classname": "off",
 
      // Accesibilidad
      "jsx-a11y/anchor-is-valid": "warn",
      "jsx-a11y/alt-text": "error",
 
      // TypeScript
      "@typescript-eslint/no-unused-vars": [
        "error",
        { argsIgnorePattern: "^_" },
      ],
      "@typescript-eslint/consistent-type-imports": "error",
 
      // Imports
      "import/order": [
        "warn",
        {
          groups: [
            "builtin",
            "external",
            "internal",
            ["parent", "sibling"],
            "index",
            "type",
          ],
          "newlines-between": "always",
          alphabetize: { order: "asc" },
        },
      ],
    },
  },
];
 
export default eslintConfig;

Lo que esto demuestra:

Capas de plugins encima de presets de Next.js
Plugin Tailwind usando su soporte nativo de flat config
Limitando el plugin de testing-library solo a archivos de pruebas
Ordenamiento de importaciones con separación de grupos

Análisis Profundo

Cómo Funciona

Los plugins proporcionan colecciones de reglas bajo un namespace (p.ej., react/, jsx-a11y/)
next/core-web-vitals ya incluye eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-next, eslint-plugin-import y eslint-plugin-jsx-a11y
Plugins adicionales como tailwindcss y testing-library se agregan encima
En flat config, algunos plugins exportan configs["flat/recommended"] directamente; otros necesitan FlatCompat

Variaciones

Descripción general de plugins:

Plugin	Namespace	Qué Hace
`eslint-plugin-react`	`react/`	Mejores prácticas de JSX, patrones de componentes
`eslint-plugin-react-hooks`	`react-hooks/`	Reglas de hooks y revisión de dependencias
`@typescript-eslint/eslint-plugin`	`@typescript-eslint/`	Reglas específicas de TypeScript
`eslint-plugin-import`	`import/`	Ordenamiento de importaciones, sin duplicados, sin no resueltos
`eslint-plugin-jsx-a11y`	`jsx-a11y/`	Reglas de accesibilidad para elementos JSX
`eslint-plugin-tailwindcss`	`tailwindcss/`	Ordenamiento de clases, sin clases contradictorias
`eslint-plugin-testing-library`	`testing-library/`	Mejores prácticas para Testing Library

Reglas clave del plugin Tailwind:

{
  rules: {
    "tailwindcss/classnames-order": "warn",        // Ordena clases
    "tailwindcss/no-custom-classname": "off",       // Permite clases personalizadas
    "tailwindcss/no-contradicting-classname": "error", // Detecta p-4 p-8
    "tailwindcss/enforces-negative-arbitrary-values": "warn",
  },
}

Plugin de Testing Library (limitado a archivos de pruebas):

{
  files: ["**/*.test.{ts,tsx}", "**/*.spec.{ts,tsx}"],
  rules: {
    "testing-library/await-async-queries": "error",
    "testing-library/no-debugging-utils": "warn",
    "testing-library/no-dom-import": "error",
    "testing-library/prefer-screen-queries": "warn",
  },
}

Notas de TypeScript

// Reglas clave de @typescript-eslint:
// no-unused-vars — detecta importaciones y variables sin usar
// no-explicit-any — marca el uso del tipo `any`
// consistent-type-imports — obliga la sintaxis `import type { X }`
// no-non-null-assertion — marca las aserciones `obj!.prop`
// prefer-nullish-coalescing — marca `||` donde `??` es más seguro
 
// Estos complementan el modo strict de tsconfig pero detectan
// cosas diferentes (patrones vs tipos)

Trampas

Cosas que te atraparán. Cada trampa incluye qué sale mal, por qué sucede y la solución.

Registro duplicado de plugins — Instalar eslint-plugin-react manualmente cuando next/core-web-vitals ya lo incluye causa conflictos. Solución: Verifica qué incluye el preset antes de agregar plugins. Solo agrega plugins que no estén ya incluidos.
El plugin Tailwind requiere configuración — eslint-plugin-tailwindcss necesita encontrar tu archivo tailwind.config.*. Si tu configuración está en una ubicación no estándar, el plugin falla silenciosamente. Solución: Establece la opción config en la configuración del plugin.
Plugin de Testing en todos los archivos — Aplicar reglas de testing-library globalmente marca código que no es de pruebas. Solución: Siempre limita con files: ["**/*.test.*"].
Compatibilidad de flat config — No todos los plugins soportan flat config nativamente. Algunos necesitan envoltorio FlatCompat, lo que puede causar comportamientos inesperados. Solución: Revisa el README del plugin para soporte de flat config y usa FlatCompat solo cuando sea necesario.
Rendimiento con muchos plugins — Cada plugin agrega tiempo de análisis y revisión de reglas. Cinco o más plugins pueden ralentizar notablemente el linting. Solución: Usa TIMING=1 npx eslint . para perfilar qué reglas son lentas y desactiva las que no necesites.

Alternativas

Otras formas de resolver el mismo problema — y cuándo cada opción es mejor.

Alternativa	Úsalo Cuando	No lo Uses Cuando
Biome	Quieres linting + formateo en una herramienta rápida	Necesitas reglas de Tailwind o testing-library
Solo `next/core-web-vitals`	Los plugins incluidos son suficientes para tu proyecto	Necesitas ordenamiento de clases de Tailwind o reglas de testing
`oxlint`	Quieres linting extremadamente rápido con reglas comunes	Necesitas reglas específicas de plugins (Tailwind, testing)

FAQs

¿Qué plugins ya están incluidos en next/core-web-vitals?

eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-next
eslint-plugin-import
eslint-plugin-jsx-a11y

No necesitas instalar estos por separado.

Trampa: ¿Qué sucede si instalo un plugin que next/core-web-vitals ya incluye?

Obtienes registro duplicado de plugins, que causa conflictos y comportamiento inesperado de reglas.
Verifica qué incluye el preset antes de agregar manualmente plugins.
Solo agrega plugins que no estén ya incluidos en el preset.

¿Cómo limito un plugin a tipos de archivo específicos?

{
  files: ["**/*.test.{ts,tsx}", "**/*.spec.{ts,tsx}"],
  rules: {
    "testing-library/await-async-queries": "error",
    "testing-library/prefer-screen-queries": "warn",
  },
}

Usa la propiedad files para restringir las reglas a globs coincidentes.

¿Qué proporciona eslint-plugin-tailwindcss?

tailwindcss/classnames-order ordena las clases de Tailwind en el orden recomendado.
tailwindcss/no-contradicting-classname detecta conflictos como p-4 p-8.
tailwindcss/no-custom-classname marca clases que no están en la configuración de Tailwind (a menudo desactivado).

¿Cómo encuentra el plugin Tailwind mi archivo tailwind.config?

Busca tailwind.config.* en la raíz del proyecto por defecto.
Si tu configuración está en una ubicación no estándar, establece la opción config en la configuración del plugin.
Sin la ruta correcta de configuración, el plugin falla silenciosamente.

¿Cuál es la diferencia entre plugins nativos de flat config y plugins de FlatCompat?

Los plugins nativos de flat config exportan configs["flat/recommended"] directamente.
Los plugins más antiguos necesitan envoltorio FlatCompat para funcionar con ESLint 9 flat config.
Revisa el README de cada plugin para verificar el estado de soporte de flat config.

Trampa: ¿Por qué agregar muchos plugins ralentiza el linting?

Cada plugin agrega su propio análisis y sobrecarga de revisión de reglas.
Cinco o más plugins activos pueden ralentizar notablemente el linting.
Perfila con TIMING=1 npx eslint . para encontrar las reglas más lentas y desactiva las que no necesites.

¿Cómo agrego reglas específicas de TypeScript a través de @typescript-eslint?

"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
"@typescript-eslint/consistent-type-imports": "error",
"@typescript-eslint/no-explicit-any": "warn",

Estas se incluyen a través de next/typescript pero puedes anular su severidad.

¿Puedo usar eslint-plugin-testing-library en todos los archivos?

No. Aplicarlo globalmente marca código que no es de pruebas con falsos positivos.
Siempre limítalo con files: ["**/*.test.*", "**/*.spec.*"].

¿Cómo verifico qué plugin proporciona una regla específica?

Las reglas van prefijadas con el namespace del plugin: react/, @typescript-eslint/, jsx-a11y/, etc.
Ejecuta npx eslint --print-config src/app/page.tsx para ver todas las reglas activas y sus fuentes.

¿Qué reglas de accesibilidad proporciona jsx-a11y?

jsx-a11y/alt-text requiere atributos alt en imágenes.
jsx-a11y/anchor-is-valid advierte sobre anclajes sin href válido.
El plugin verifica roles ARIA, accesibilidad de teclado y etiquetas de formularios.

¿Debo usar reglas de TypeScript ESLint u opciones de tsconfig strict?

Usa ambos. Detectan cosas diferentes.
@typescript-eslint detecta patrones de código (variables sin usar, promesas flotantes, any explícito).
Las opciones strict de tsconfig detectan problemas a nivel de tipos (revisiones nulas, any implícito, acceso a índices sin revisar).

Relacionado

Configuración de ESLint para Next.js — configuración base de ESLint
Reglas Esenciales de ESLint — configura reglas individuales
Integración ESLint + Prettier — evita conflictos de formateo
Husky & lint-staged — ejecuta plugins solo en archivos modificados

Plugins de ESLint

Instala y configura plugins de ESLint para React, TypeScript, accesibilidad, Tailwind CSS y testing.

Receta

Tarjeta de referencia rápida — lista para copiar y pegar.

# Plugins principales (la mayoría ya incluidos en next/core-web-vitals)
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks
 
# TypeScript
npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
 
# Imports
npm install --save-dev eslint-plugin-import
 
# Accesibilidad
npm install --save-dev eslint-plugin-jsx-a11y
 
# Tailwind CSS
npm install --save-dev eslint-plugin-tailwindcss
 
# Testing Library
npm install --save-dev eslint-plugin-testing-library

Ejemplo de Funcionamiento

// eslint.config.mjs
import { FlatCompat } from "@eslint/eslintrc";
import tailwindcss from "eslint-plugin-tailwindcss";
import { dirname } from "path";
import { fileURLToPath } from "url";
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
 
const compat = new FlatCompat({ baseDirectory: __dirname });
 
const eslintConfig = [
  // Presets de Next.js (incluye react, react-hooks, import, jsx-a11y)
  ...compat.extends("next/core-web-vitals", "next/typescript"),
 
  // Plugin Tailwind CSS (compatible con flat config nativo)
  ...tailwindcss.configs["flat/recommended"],
 
  // Testing Library (solo para archivos de pruebas)
  {
    files: ["**/*.test.{ts,tsx}", "**/*.spec.{ts,tsx}"],
    ...compat.extends("plugin:testing-library/react")[0],
  },
 
  // Overrides de reglas personalizadas
  {
    rules: {
      // Tailwind
      "tailwindcss/classnames-order": "warn",
      "tailwindcss/no-custom-classname": "off",
 
      // Accesibilidad
      "jsx-a11y/anchor-is-valid": "warn",
      "jsx-a11y/alt-text": "error",
 
      // TypeScript
      "@typescript-eslint/no-unused-vars": [
        "error",
        { argsIgnorePattern: "^_" },
      ],
      "@typescript-eslint/consistent-type-imports": "error",
 
      // Imports
      "import/order": [
        "warn",
        {
          groups: [
            "builtin",
            "external",
            "internal",
            ["parent", "sibling"],
            "index",
            "type",
          ],
          "newlines-between": "always",
          alphabetize: { order: "asc" },
        },
      ],
    },
  },
];
 
export default eslintConfig;

Lo que esto demuestra:

Capas de plugins encima de presets de Next.js
Plugin Tailwind usando su soporte nativo de flat config
Limitando el plugin de testing-library solo a archivos de pruebas
Ordenamiento de importaciones con separación de grupos

Análisis Profundo

Cómo Funciona

Los plugins proporcionan colecciones de reglas bajo un namespace (p.ej., react/, jsx-a11y/)
next/core-web-vitals ya incluye eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-next, eslint-plugin-import y eslint-plugin-jsx-a11y
Plugins adicionales como tailwindcss y testing-library se agregan encima
En flat config, algunos plugins exportan configs["flat/recommended"] directamente; otros necesitan FlatCompat

Variaciones

Descripción general de plugins:

Plugin	Namespace	Qué Hace
`eslint-plugin-react`	`react/`	Mejores prácticas de JSX, patrones de componentes
`eslint-plugin-react-hooks`	`react-hooks/`	Reglas de hooks y revisión de dependencias
`@typescript-eslint/eslint-plugin`	`@typescript-eslint/`	Reglas específicas de TypeScript
`eslint-plugin-import`	`import/`	Ordenamiento de importaciones, sin duplicados, sin no resueltos
`eslint-plugin-jsx-a11y`	`jsx-a11y/`	Reglas de accesibilidad para elementos JSX
`eslint-plugin-tailwindcss`	`tailwindcss/`	Ordenamiento de clases, sin clases contradictorias
`eslint-plugin-testing-library`	`testing-library/`	Mejores prácticas para Testing Library

Reglas clave del plugin Tailwind:

{
  rules: {
    "tailwindcss/classnames-order": "warn",        // Ordena clases
    "tailwindcss/no-custom-classname": "off",       // Permite clases personalizadas
    "tailwindcss/no-contradicting-classname": "error", // Detecta p-4 p-8
    "tailwindcss/enforces-negative-arbitrary-values": "warn",
  },
}

Plugin de Testing Library (limitado a archivos de pruebas):

{
  files: ["**/*.test.{ts,tsx}", "**/*.spec.{ts,tsx}"],
  rules: {
    "testing-library/await-async-queries": "error",
    "testing-library/no-debugging-utils": "warn",
    "testing-library/no-dom-import": "error",
    "testing-library/prefer-screen-queries": "warn",
  },
}

Notas de TypeScript

// Reglas clave de @typescript-eslint:
// no-unused-vars — detecta importaciones y variables sin usar
// no-explicit-any — marca el uso del tipo `any`
// consistent-type-imports — obliga la sintaxis `import type { X }`
// no-non-null-assertion — marca las aserciones `obj!.prop`
// prefer-nullish-coalescing — marca `||` donde `??` es más seguro
 
// Estos complementan el modo strict de tsconfig pero detectan
// cosas diferentes (patrones vs tipos)

Trampas

Cosas que te atraparán. Cada trampa incluye qué sale mal, por qué sucede y la solución.

Registro duplicado de plugins — Instalar eslint-plugin-react manualmente cuando next/core-web-vitals ya lo incluye causa conflictos. Solución: Verifica qué incluye el preset antes de agregar plugins. Solo agrega plugins que no estén ya incluidos.
El plugin Tailwind requiere configuración — eslint-plugin-tailwindcss necesita encontrar tu archivo tailwind.config.*. Si tu configuración está en una ubicación no estándar, el plugin falla silenciosamente. Solución: Establece la opción config en la configuración del plugin.
Plugin de Testing en todos los archivos — Aplicar reglas de testing-library globalmente marca código que no es de pruebas. Solución: Siempre limita con files: ["**/*.test.*"].
Compatibilidad de flat config — No todos los plugins soportan flat config nativamente. Algunos necesitan envoltorio FlatCompat, lo que puede causar comportamientos inesperados. Solución: Revisa el README del plugin para soporte de flat config y usa FlatCompat solo cuando sea necesario.
Rendimiento con muchos plugins — Cada plugin agrega tiempo de análisis y revisión de reglas. Cinco o más plugins pueden ralentizar notablemente el linting. Solución: Usa TIMING=1 npx eslint . para perfilar qué reglas son lentas y desactiva las que no necesites.

Alternativas

Otras formas de resolver el mismo problema — y cuándo cada opción es mejor.

Alternativa	Úsalo Cuando	No lo Uses Cuando
Biome	Quieres linting + formateo en una herramienta rápida	Necesitas reglas de Tailwind o testing-library
Solo `next/core-web-vitals`	Los plugins incluidos son suficientes para tu proyecto	Necesitas ordenamiento de clases de Tailwind o reglas de testing
`oxlint`	Quieres linting extremadamente rápido con reglas comunes	Necesitas reglas específicas de plugins (Tailwind, testing)

FAQs

¿Qué plugins ya están incluidos en next/core-web-vitals?

eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-next
eslint-plugin-import
eslint-plugin-jsx-a11y

No necesitas instalar estos por separado.

Trampa: ¿Qué sucede si instalo un plugin que next/core-web-vitals ya incluye?

Obtienes registro duplicado de plugins, que causa conflictos y comportamiento inesperado de reglas.
Verifica qué incluye el preset antes de agregar manualmente plugins.
Solo agrega plugins que no estén ya incluidos en el preset.

¿Cómo limito un plugin a tipos de archivo específicos?

{
  files: ["**/*.test.{ts,tsx}", "**/*.spec.{ts,tsx}"],
  rules: {
    "testing-library/await-async-queries": "error",
    "testing-library/prefer-screen-queries": "warn",
  },
}

Usa la propiedad files para restringir las reglas a globs coincidentes.

¿Qué proporciona eslint-plugin-tailwindcss?

tailwindcss/classnames-order ordena las clases de Tailwind en el orden recomendado.
tailwindcss/no-contradicting-classname detecta conflictos como p-4 p-8.
tailwindcss/no-custom-classname marca clases que no están en la configuración de Tailwind (a menudo desactivado).

¿Cómo encuentra el plugin Tailwind mi archivo tailwind.config?

Busca tailwind.config.* en la raíz del proyecto por defecto.
Si tu configuración está en una ubicación no estándar, establece la opción config en la configuración del plugin.
Sin la ruta correcta de configuración, el plugin falla silenciosamente.

¿Cuál es la diferencia entre plugins nativos de flat config y plugins de FlatCompat?

Los plugins nativos de flat config exportan configs["flat/recommended"] directamente.
Los plugins más antiguos necesitan envoltorio FlatCompat para funcionar con ESLint 9 flat config.
Revisa el README de cada plugin para verificar el estado de soporte de flat config.

Trampa: ¿Por qué agregar muchos plugins ralentiza el linting?

Cada plugin agrega su propio análisis y sobrecarga de revisión de reglas.
Cinco o más plugins activos pueden ralentizar notablemente el linting.
Perfila con TIMING=1 npx eslint . para encontrar las reglas más lentas y desactiva las que no necesites.

¿Cómo agrego reglas específicas de TypeScript a través de @typescript-eslint?

"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
"@typescript-eslint/consistent-type-imports": "error",
"@typescript-eslint/no-explicit-any": "warn",

Estas se incluyen a través de next/typescript pero puedes anular su severidad.

¿Puedo usar eslint-plugin-testing-library en todos los archivos?

No. Aplicarlo globalmente marca código que no es de pruebas con falsos positivos.
Siempre limítalo con files: ["**/*.test.*", "**/*.spec.*"].

¿Cómo verifico qué plugin proporciona una regla específica?

Las reglas van prefijadas con el namespace del plugin: react/, @typescript-eslint/, jsx-a11y/, etc.
Ejecuta npx eslint --print-config src/app/page.tsx para ver todas las reglas activas y sus fuentes.

¿Qué reglas de accesibilidad proporciona jsx-a11y?

jsx-a11y/alt-text requiere atributos alt en imágenes.
jsx-a11y/anchor-is-valid advierte sobre anclajes sin href válido.
El plugin verifica roles ARIA, accesibilidad de teclado y etiquetas de formularios.

¿Debo usar reglas de TypeScript ESLint u opciones de tsconfig strict?

Usa ambos. Detectan cosas diferentes.
@typescript-eslint detecta patrones de código (variables sin usar, promesas flotantes, any explícito).
Las opciones strict de tsconfig detectan problemas a nivel de tipos (revisiones nulas, any implícito, acceso a índices sin revisar).

Relacionado

Configuración de ESLint para Next.js — configuración base de ESLint
Reglas Esenciales de ESLint — configura reglas individuales
Integración ESLint + Prettier — evita conflictos de formateo
Husky & lint-staged — ejecuta plugins solo en archivos modificados

Plugins de ESLint

Buscar en la documentación

Plugins de ESLint