Configurar ESLint en Angular para obtener código limpio y mantenible

Si tu proyecto Angular no viene con ESLint preconfigurado (lo cual es común en versiones de Angular 12 en adelante), la instalación es un proceso sencillo gracias a la herramienta de línea de comandos de Angular (Angular CLI). El paquete @angular-eslint/schematics facilita la configuración automatizada de ESLint en proyectos Angular.

Para comenzar, abre la terminal en la raíz de tu proyecto Angular y ejecuta el siguiente comando:

Este comando descarga e instala el paquete @angular-eslint/schematics y realiza las configuraciones necesarias para integrar ESLint en tu proyecto Angular. Internamente, este schematic automatiza varios pasos importantes . Primero, modifica el archivo package.json para incluir las dependencias de ESLint y los plugins relacionados con TypeScript y Angular, además de añadir un script en la sección «scripts» para facilitar la ejecución del linter. Luego, actualiza el archivo angular.json para registrar un «builder» de ESLint. Este builder permite ejecutar ESLint a través de comandos del Angular CLI, como ng lint. Finalmente, crea o modifica el archivo de configuración .eslintrc.json en la raíz del proyecto, donde se definirán las reglas de linting. La utilización de Angular Schematics simplifica significativamente este proceso, abstrayendo la necesidad de instalar manualmente dependencias y configurar múltiples archivos, lo que ahorra tiempo y reduce la posibilidad de errores.

Una vez que ESLint se ha instalado en tu proyecto Angular, el archivo clave para su configuración es .eslintrc.json, ubicado en la raíz del proyecto. Este archivo define las reglas que ESLint utilizará para analizar tu código. A continuación, se muestra un ejemplo de una configuración básica para un proyecto Angular:

Analicemos cada sección de este archivo:

• «root»: true: Esta línea indica que este es el archivo de configuración raíz de ESLint para el proyecto . Cuando ESLint analiza archivos en el proyecto, comenzará buscando un archivo .eslintrc.json en el directorio del archivo actual y continuará subiendo por la jerarquía de directorios hasta que encuentre un archivo con «root»: true» o llegue a la raíz del sistema de archivos. Esto asegura que la configuración definida en este archivo se aplique a todo el proyecto y evita que se utilicen configuraciones de directorios superiores de forma accidental.
• «overrides»: […]: Esta sección permite definir configuraciones específicas para ciertos grupos de archivos mediante el uso de patrones . Es útil cuando se necesitan aplicar reglas diferentes a distintos tipos de archivos dentro del mismo proyecto.
• «files»: [«*.ts»]: Dentro de la sección «overrides», esta propiedad especifica a qué archivos se aplicará la configuración definida en este bloque. En este caso, el patrón «*.ts» indica que las reglas dentro de este «override» se aplicarán únicamente a los archivos con la extensión .ts, que son los archivos de código TypeScript en un proyecto Angular.
• «extends»: […]: Esta propiedad es fundamental, ya que especifica una o más configuraciones predefinidas de las cuales hereda la configuración actual . Esto permite aprovechar conjuntos de reglas recomendadas sin tener que definirlas todas desde cero. En el ejemplo, se extienden tres configuraciones:

– «eslint:recommended»: Este es un conjunto de reglas básicas recomendadas por el equipo de ESLint que cubren muchos de los posibles errores y malas prácticas comunes en JavaScript .

– «plugin:@typescript-eslint/recommended»: Esta configuración proviene del plugin @typescript-eslint/eslint-plugin y habilita un conjunto de reglas específicas para TypeScript, recomendadas por el equipo de desarrollo de TypeScript . Para que ESLint pueda entender la sintaxis de TypeScript, es necesario utilizar el parser @typescript-eslint/parser, que generalmente se instala junto con este plugin.

– «plugin:@angular-eslint/recommended»: Esta configuración es proporcionada por el plugin @angular-eslint/eslint-plugin e incluye reglas específicas para proyectos Angular, ayudando a asegurar el cumplimiento de las convenciones y buenas prácticas del framework . Extender configuraciones predefinidas proporciona una base sólida de reglas de linting basadas en las mejores prácticas establecidas, lo que evita que los desarrolladores tengan que definir cada regla desde el principio.

• Esta sección permite personalizar el comportamiento de las reglas que se han extendido o definir reglas adicionales específicas para el proyecto . Las reglas se definen como pares clave-valor, donde la clave es el nombre de la regla y el valor es el nivel de severidad o una configuración adicional para esa regla. En el ejemplo, se definen dos reglas:»rules»: […]:

– «@typescript-eslint/no-unused-vars»: «warn»: Esta regla, proporcionada por el plugin de TypeScript, advierte sobre las variables declaradas en el código que no se utilizan . El nivel de severidad «warn» indica que si se encuentra una variable no utilizada, ESLint mostrará una advertencia, pero el proceso de linting no fallará.

La configuración básica del archivo .eslintrc.json proporciona una excelente base para la mayoría de los proyectos Angular. Sin embargo, ESLint ofrece una gran flexibilidad para personalizar aún más las reglas según las necesidades específicas de tu equipo y proyecto.

En la sección «rules» del archivo .eslintrc.json, puedes añadir nuevas reglas, modificar la severidad de las reglas extendidas o incluso desactivarlas por completo . Además, la comunidad de ESLint ha desarrollado una amplia variedad de plugins que extienden la funcionalidad base de ESLint, añadiendo reglas específicas para diferentes librerías, frameworks o patrones de codificación .

A continuación, se presentan algunos ejemplos de reglas avanzadas que suelen ser recomendadas en proyectos Angular:

• Evitar el uso de any: La regla «@typescript-eslint/no-explicit-any»: «error» del plugin de TypeScript es fundamental para aprovechar al máximo los beneficios del tipado estático que ofrece TypeScript. Al establecer esta regla en «error», se obliga a los desarrolladores a ser explícitos con los tipos y se evita el uso del tipo any cuando no es estrictamente necesario. El uso excesivo de any puede debilitar la verificación de tipos en tiempo de compilación, lo que podría llevar a errores en tiempo de ejecución que TypeScript está diseñado para prevenir.
• Requerir la verificación estricta de nulos: La regla «@typescript-eslint/strict-boolean-expressions»: «warn» también del plugin de TypeScript ayuda a prevenir errores al asegurar que las expresiones booleanas solo utilicen valores booleanos explícitos. Esto evita conversiones implícitas que podrían llevar a comportamientos inesperados, especialmente al trabajar con valores que pueden ser null o undefined. El nivel «warn» sugiere que se preste atención a estos casos, aunque no se consideren errores críticos que detengan el desarrollo de inmediato.
• Enforzar convenciones de nomenclatura: El plugin @typescript-eslint/eslint-plugin proporciona la regla @typescript-eslint/naming-convention que permite definir patrones de nomenclatura específicos para diferentes tipos de identificadores, como interfaces, clases, variables, métodos, etc. Configurar estas reglas ayuda a mantener la consistencia en la nomenclatura del código, lo que mejora significativamente la legibilidad y facilita la comprensión del proyecto por parte de todos los miembros del equipo. Por ejemplo, se pueden definir reglas para que las interfaces comiencen con una «I» mayúscula (ej: interface IUserService), los métodos utilicen camelCase, y las constantes estén en UPPER_SNAKE_CASE.
• Linting de plantillas HTML: Para asegurar la calidad del código no solo en los archivos TypeScript sino también en las plantillas HTML de Angular, se puede utilizar el plugin @angular-eslint/eslint-plugin-template . Este plugin permite a ESLint analizar y aplicar reglas a los archivos con la extensión .html. Para habilitarlo, primero debes instalar el plugin:

Luego, debes configurarlo en tu archivo .eslintrc.json. En la sección «plugins», añade @angular-eslint/template. Además, en la sección «overrides», añade una configuración específica para los archivos *.html:

Extender ESLint para analizar las plantillas HTML de Angular asegura la consistencia y el cumplimiento de las mejores prácticas no solo en el código TypeScript sino también en la capa de presentación, lo que lleva a una aplicación más robusta y fácil de mantener.

Si bien ESLint se enfoca en la calidad semántica y el cumplimiento de reglas de estilo, Prettier es una herramienta que se encarga de formatear el código de manera automática para asegurar un estilo consistente en todo el proyecto . Es importante entender la diferencia fundamental entre ambos: ESLint es un linter que identifica problemas, mientras que Prettier es un formateador que corrige el estilo del código.

Para integrar Prettier con ESLint en un proyecto Angular, se necesitan instalar dos paquetes adicionales como dependencias de desarrollo: eslint-config-prettier y eslint-plugin-prettier.

Ejecuta los siguientes comandos en la terminal:

• eslint-config-prettier: Este paquete deshabilita todas las reglas de formato de ESLint que podrían entrar en conflicto con Prettier.
• eslint-plugin-prettier: Este plugin permite ejecutar Prettier como una regla de ESLint, mostrando los problemas de formato como errores de ESLint.

Una vez instalados estos paquetes, debes modificar tu archivo .eslintrc.json para integrarlos. En la sección «extends» dentro del override para archivos TypeScript, añade «plugin:prettier/recommended» al final del array. Es crucial que esta línea esté al final, ya que el orden en el array «extends» importa; las configuraciones posteriores tienen prioridad sobre las anteriores .

El archivo .eslintrc.json con Prettier integrado debería lucir así:

Al colocar «plugin:prettier/recommended» al final del array «extends», se asegura que las reglas de formato de Prettier tengan la menor prioridad y no entren en conflicto con otras configuraciones de ESLint. Esto permite que ESLint se encargue de la calidad del código y Prettier de su formato, trabajando juntos de manera armoniosa.

La implementación de ESLint y su correcta configuración en proyectos Angular es una inversión invaluable para cualquier equipo de desarrollo. Al adoptar estas prácticas, se promueve la escritura de código más limpio, consistente y mantenible a lo largo del ciclo de vida del proyecto. La capacidad de detectar errores tempranamente, aplicar estándares de codificación uniformes y automatizar el formateo del código facilita la colaboración, reduce la fricción entre los miembros del equipo y, en última instancia, conduce a la creación de aplicaciones Angular de mayor calidad.

Para aquellos que deseen profundizar aún más en la configuración de ESLint y explorar las numerosas opciones y reglas disponibles, se recomienda consultar la documentación oficial de ESLint en eslint.org. Además, los plugins específicos para Angular, como @angular-eslint/eslint-plugin y @angular-eslint/eslint-plugin-template, ofrecen una amplia gama de reglas diseñadas para garantizar el cumplimiento de las mejores prácticas del framework. La exploración de estos recursos permitirá a los desarrolladores personalizar aún más su configuración de linting y adaptarla a las necesidades particulares de sus proyectos y equipos.