ESLint + Plugins de TypeScript para TypeScript: guía completa con ejemplos

Introducción: ¿Qué son ESLint + Plugins de TypeScript y para qué sirven?

En el desarrollo web moderno, TypeScript se ha convertido en el estándar de facto para crear aplicaciones escalables y confiables. Sin embargo, incluso el compilador de TypeScript más estricto no puede detectar todos los errores lógicos, inconsistencias de estilo o posibles bugs que pueden surgir durante la escritura de código. Aquí es donde entra en juego ESLint, un potente linter para JavaScript que, con la ayuda de plugins especiales, se adapta para trabajar con TypeScript.

ESLint + Plugins de TypeScript no es una biblioteca independiente en el sentido tradicional (como, por ejemplo, Lodash), sino más bien un ecosistema de herramientas. El paquete principal — eslint — se encarga del análisis de código, mientras que los plugins @typescript-eslint/eslint-plugin y @typescript-eslint/parser añaden soporte para la sintaxis de TypeScript y proporcionan cientos de reglas específicas de TypeScript.

¿Para qué sirve?

\n
• Detección temprana de errores: El linter puede detectar problemas potenciales que el compilador de TypeScript pasaría por alto (por ejemplo, variables no utilizadas, uso incorrecto de promesas, problemas con tipos que no son sintácticos).
\n
• Estilo de código unificado: En un equipo de desarrolladores, el linter asegura el cumplimiento de un estilo de código único (sangrías, comillas, punto y coma), haciendo que el código sea más legible y predecible.
\n
• Corrección automática: Muchas reglas de ESLint admiten la autocorrección (--fix), lo que permite formatear el código automáticamente y corregir errores simples.
\n
• Integración con IDE: La mayoría de los editores de código modernos (VS Code, WebStorm) tienen soporte integrado para ESLint, lo que permite ver errores y advertencias directamente mientras se escribe código.
\n

En el sitio pythonlib.ru nos esforzamos por proporcionar las guías más útiles. Este artículo será su referencia exhaustiva para la configuración y uso de ESLint con TypeScript.

Instalación de ESLint y los plugins de TypeScript

La instalación se realiza a través del gestor de paquetes npm (o yarn, pnpm). Se asume que ya tiene un proyecto con un archivo package.json y TypeScript (typescript) instalado.

Ejecute en la terminal en la raíz de su proyecto:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Analicemos lo que instalamos:

\n
• eslint — el núcleo del linter.
\n
• @typescript-eslint/parser — un analizador que permite a ESLint entender la sintaxis de TypeScript (incluyendo genéricos, decoradores, tipos, etc.).
\n
• @typescript-eslint/eslint-plugin — un plugin que contiene un conjunto de reglas específicas de TypeScript (por ejemplo, @typescript-eslint/no-unused-vars en lugar del estándar no-unused-vars).
\n

Adicionalmente (recomendado):

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Esto permitirá integrar ESLint con Prettier (formateador de código) y evitar conflictos entre ellos.

Inicio rápido: configuración y primera ejecución

Después de la instalación, es necesario crear un archivo de configuración. La forma más sencilla es generarlo usando el asistente integrado de ESLint:

npx eslint --init

Se le harán varias preguntas. Seleccione:

\n
• ¿Cómo desea usar ESLint? — To check syntax, find problems, and enforce code style
\n
• ¿Qué formato de módulos utiliza? — JavaScript modules (import/export)
\n
• ¿Qué framework? — None of these