Cinco Plugins de ESLint Que Mejoran la Calidad del Código
Has configurado ESLint. Detecta variables sin usar y señala puntos y comas faltantes. Pero tu base de código sigue acumulando errores sutiles, importaciones inconsistentes y problemas de accesibilidad que pasan desapercibidos en la revisión de código. Las reglas predeterminadas no son suficientes.
ESLint 9 introdujo la configuración plana (eslint.config.js), reemplazando el formato heredado .eslintrc. Este cambio simplifica la integración de plugins y hace que la configuración sea más predecible. Ya sea que hayas migrado o aún uses el formato anterior, los plugins adecuados transforman ESLint de un verificador básico a una verdadera puerta de calidad.
Aquí hay cinco plugins que abordan problemas reales en proyectos frontend modernos, sin inflar tus herramientas.
Puntos Clave
- typescript-eslint habilita linting consciente de tipos que detecta patrones de acceso inseguros y declaraciones
awaitolvidadas - eslint-plugin-import refuerza la higiene de módulos validando rutas, detectando dependencias circulares y organizando importaciones de manera consistente
- eslint-plugin-unicorn proporciona más de 100 reglas que impulsan hacia patrones modernos de JavaScript y previenen errores sutiles
- eslint-plugin-jsx-a11y detecta problemas comunes de accesibilidad en JSX antes de que lleguen a los usuarios
- @eslint/css extiende el linting más allá de JavaScript para detectar errores en hojas de estilo bajo un flujo de trabajo unificado
typescript-eslint: Linting Consciente de Tipos para Proyectos TypeScript
El plugin @typescript-eslint integra el sistema de tipos de TypeScript en tu flujo de trabajo de linting. A diferencia de las verificaciones básicas de sintaxis, las reglas conscientes de tipos detectan problemas que requieren comprender los tipos de tu código.
Considera una función que podría devolver null. El linting consciente de tipos señala patrones de acceso inseguros que de otro modo revelarían errores en tiempo de ejecución en producción. Reglas como no-floating-promises detectan declaraciones await olvidadas, y no-unnecessary-condition identifica ramas de código muerto.
Para bases de código más grandes, typescript-eslint ofrece Project Service, que mejora el rendimiento reutilizando las instancias de programa de TypeScript entre archivos. Esto importa cuando se analizan miles de archivos en CI.
En configuración plana, importas el plugin directamente y expandes sus configuraciones recomendadas. La configuración se integra limpiamente con el modelo de configuración plana de ESLint 9 cuando se usa la cadena de herramientas estándar de typescript-eslint.
eslint-plugin-import: Higiene de Módulos y Organización de Importaciones
eslint-plugin-import previene el caos que se acumula en las declaraciones de importación a lo largo de una base de código en crecimiento.
El plugin detecta rutas mal escritas antes del tiempo de ejecución, asegura que las importaciones nombradas coincidan con las exportaciones reales y señala dependencias circulares que causan errores sutiles. Su regla no-extraneous-dependencies previene la importación de paquetes no listados en package.json, una fuente común de fallos de despliegue.
La regla import/order refuerza el agrupamiento consistente: primero paquetes externos, luego módulos internos, después importaciones relativas. Esta consistencia hace que los archivos sean escaneables y los diffs más limpios durante la revisión de código.
Para equipos, este plugin elimina debates de estilo sobre la organización de importaciones. Configúralo una vez, y la corrección automática se encarga del resto.
eslint-plugin-unicorn: Prevención de Errores con Opinión
eslint-plugin-unicorn proporciona más de 100 reglas que detectan problemas sutiles y refuerzan patrones modernos de JavaScript.
Señala Array.forEach cuando for...of sería más claro. Detecta new Array(5) cuando querías decir Array.from({ length: 5 }). Previene llamadas a process.exit() que omiten manejadores de limpieza.
El plugin impulsa hacia sintaxis moderna: prefiriendo Array.includes() sobre indexOf() !== -1, sugiriendo String.replaceAll() sobre regex con banderas globales, y señalando métodos Number obsoletos.
No todas las reglas se ajustan a todos los equipos. Comienza con el preset recomendado, luego deshabilita reglas que entren en conflicto con las convenciones de tu base de código.
Discover how at OpenReplay.com.
eslint-plugin-jsx-a11y: Linting de Accesibilidad en JSX
eslint-plugin-jsx-a11y detecta problemas de accesibilidad en JSX antes de que lleguen a los usuarios.
El plugin señala imágenes sin atributos alt, botones sin nombres accesibles y campos de formulario sin etiquetas. Detecta el uso de autoFocus que interrumpe la navegación por teclado e identifica manejadores de clic en elementos no interactivos.
Estas reglas no garantizan el cumplimiento de WCAG: las herramientas automatizadas detectan aproximadamente el 30% de los problemas de accesibilidad. Pero previenen los errores más comunes y construyen conciencia sobre accesibilidad en el desarrollo diario.
Para equipos que entregan aplicaciones orientadas al usuario, este plugin es esencial. Los errores de accesibilidad afectan a usuarios reales y conllevan implicaciones legales en muchas jurisdicciones.
@eslint/css: Linting Más Allá de JavaScript
ESLint ahora se extiende más allá de JavaScript. El plugin @eslint/css lleva análisis estático a las hojas de estilo, detectando errores de sintaxis y reforzando convenciones.
De manera similar, html-eslint valida la estructura HTML, señalando IDs duplicados, atributos lang faltantes y anidamiento inválido.
Estos plugins importan para proyectos con módulos CSS, plantillas HTML o bibliotecas de componentes donde la calidad del marcado afecta el renderizado. Unifican tu flujo de trabajo de linting bajo una sola herramienta en lugar de requerir validadores separados.
Separación de Responsabilidades: Linting vs. Formateo
Una aclaración: ESLint maneja la calidad del código, no el formateo. Deja que Prettier gestione puntos y comas, comillas e indentación. Usa eslint-config-prettier para deshabilitar reglas de ESLint que entren en conflicto con Prettier, luego ejecuta ambas herramientas por separado.
Esta separación mantiene tu configuración de ESLint enfocada en detectar errores en lugar de reforzar preferencias de estilo.
Conclusión
Estos cinco plugins abordan problemas distintos: seguridad de tipos, higiene de importaciones, patrones modernos, accesibilidad y linting entre lenguajes. Agrégalos incrementalmente. Habilita primero los presets recomendados, luego personaliza las reglas a medida que tu equipo identifique puntos de fricción.
El objetivo no es la máxima rigurosidad, sino detectar errores reales antes de que se desplieguen.
Preguntas Frecuentes
La configuración plana de ESLint 9 usa módulos de JavaScript en lugar de JSON o YAML. Exporta un array de objetos de configuración desde eslint.config.js. Cada objeto puede especificar archivos a los que apuntar, plugins a usar y reglas a aplicar. La documentación de ESLint proporciona una guía de migración, y la mayoría de los plugins ahora incluyen ejemplos de configuración plana en su documentación.
Sí. Estos plugins apuntan a diferentes preocupaciones y rara vez se superponen. typescript-eslint maneja la verificación de tipos, eslint-plugin-import gestiona módulos, unicorn refuerza patrones, jsx-a11y cubre accesibilidad, y @eslint/css maneja hojas de estilo. Si ocurren conflictos de reglas, deshabilita la regla menos específica en tu configuración.
Las reglas conscientes de tipos de typescript-eslint agregan sobrecarga porque requieren el compilador de TypeScript. Para proyectos grandes, habilita Project Service para mejorar el rendimiento. Otros plugins agregan sobrecarga mínima. Ejecuta ESLint con la bandera --cache para omitir archivos sin cambios y acelerar ejecuciones repetidas.
No. Comienza con el preset recomendado de cada plugin, que incluye reglas probadas en batalla. Monitorea la experiencia de tu equipo y deshabilita reglas que creen fricción sin detectar errores reales. El objetivo es la prevención práctica de errores, no la máxima rigurosidad.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
