Configurando Prettier, ESLint y Husky en Angular

Uno de los aspectos más importantes al trabajar en equipo en el desarrollo de software es la estandarización. Seguir convenciones definidas nos ayuda a mantener un código limpio y consistente a lo largo de todo el ciclo de vida del proyecto.

Aunque Angular promueve buenas prácticas de forma nativa, es necesario complementar estas con otras herramientas para lograr una estandarización más completa. Existen herramientas que nos facilitan este proceso y garantizan que, una vez definidas las reglas, estas se respeten en todo el proyecto.

Prettier

Prettier es una herramienta de formateo de código que ayuda a mantener un estilo de código consistente y legible en proyectos de desarrollo de software.

Esta herramienta cobra especial relevancia cuando los miembros del equipo trabajan en diferentes entornos de desarrollo. Por ejemplo, el formateador de Visual Studio Code funciona de manera diferente al de WebStorm o Sublime Text. Al definir reglas en el archivo de configuración de Prettier y configurar el IDE para que formatee el código basado en esas reglas, logramos un código más consistente entre las distintas herramientas de trabajo.

Para configurar Prettier, es necesario instalar la dependencia en el proyecto de Angular con el siguiente comando:

pnpm i -DE prettier

Este comando instala la versión más reciente de Prettier como una dependencia de desarrollo, ya que no es necesaria en producción para el funcionamiento final del proyecto.

Una vez que Prettier está instalado, es necesario definir su configuración. Esto se puede hacer dentro del archivo package.json o en un archivo independiente llamado .prettierrc. Personalmente, prefiero la segunda opción, ya que permite mantener el archivo package.json más limpio y organizar mejor las configuraciones de las herramientas externas.

Las configuraciones base que utilizo son las siguientes:

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

• arrowParens: "avoid": Elimina los paréntesis () en funciones de flecha cuando solo se utiliza un argumento y no se especifica su tipo.
• bracketSpacing: true: Añade un espacio antes y después del contenido dentro de las llaves {}.
• printWidth: 80: Define que el número máximo de caracteres por línea es de 80.
• semi: true: Asegura que cada sentencia termine con un punto y coma ;.
• singleQuote: true: Prefiere el uso de comillas simples en lugar de comillas dobles.
• tabWidth: 2: Establece que cada tabulación ocupará 2 espacios.
• trailingComma: "all": Añade una coma al final de la última propiedad en objetos y arrays.

Como mencioné anteriormente, estas configuraciones son mi punto de partida en todos mis proyectos. Puedes usarlas como base para los tuyos y ajustarlas según tus preferencias y las de tu equipo.
Puedes encontrar más opciones de configuración en la documentación de Prettier.

ESLint

ESLint es una herramienta de análisis estático para JavaScript y TypeScript que ayuda a identificar errores, mejorar la calidad del código y aplicar convenciones de codificación consistentes. A diferencia de Prettier, que se enfoca en el formateo, ESLint detecta errores de sintaxis, variables no utilizadas y problemas de rendimiento, además de fomentar buenas prácticas de programación.

Para configurar ESLint en un proyecto Angular, la CLI nos proporciona un comando que facilita la instalación y configuración de ESLint:

ng add @angular-eslint/schematics

Al ejecutar este comando, ESLint se añade como una dependencia de desarrollo, y el archivo angular.json se actualiza con la configuración correspondiente. Además, se agrega un script en el archivo package.json para ejecutar el análisis de código (lint) en los archivos del proyecto y se crea el archivo eslint.config.js que contiene las reglas por defecto.

Husky

Es una herramienta que permite ejecutar scripts de Git Hooks de forma sencilla. Los git hooks son scripts que git ejecuta antes o después de ciertos eventos, como commits, push o merges.

Para configurar Husky en un proyecto de Angular primero se debe instalar la dependencia con el siguiente comando:

pnpm add -DE husky

Una vez instalada, se debe ejecutar el siguiente comando para crear los archivos necesarios para su funcionamiento:

pnpm exec husky init

Al ejecutar este comando, se genera el archivo .husky/pre-commit, donde se deben agregar las instrucciones que se ejecutarán antes de realizar un commit. En mi caso, la configuración es la siguiente:

prettier --write "src/**/*.{ts,html,scss}"
lint

Esta configuración, al integrarse con ESLint y Prettier, se encargará de formatear el código y ejecutar el análisis de código (lint). Si ambos comandos se ejecutan correctamente, el commit se realizará con éxito. De lo contrario, se mostrará un mensaje detallado indicando por qué falló la ejecución de alguno de los comandos.

Bonus - lint-staged

lint-staged es una herramienta que permite ejecutar linters (como ESLint, Prettier, etc.) solo en los archivos que han sido modificados y están "stagged" (preparados para commit) en Git.

Utilizar lint-staged agiliza el análisis de los archivos modificados, haciendo más rápida la comprobación y corrección automática cuando sea posible.

Para integrarlo en un proyecto Angular, primero necesitamos instalar la dependencia con el siguiente comando:

pnpm i -DE lint-staged

Luego necesitamos crear el archivo de configuración de lint-staged que define todos los procesos que se ejecutarán en el hook de pre-commit. Para ello creamos el archivo .lintstagedrc.json en la raíz del proyecto con el siguiente contenido:

{  
  "*.ts": [  
    "eslint --fix",  
    "prettier --write"  
  ],  
  "*.html": [  
    "prettier --write",  
    "eslint --fix"  
  ],  
  "*.scss": [  
    "prettier --write"  
  ]  
}

Estas configuraciones base aseguran que, al ejecutar el hook de pre-commit, se formatearán y verificarán los archivos con extensión .ts y .html. Además, los archivos .scss también se formatearán automáticamente. Sin embargo, para que lint-staged se ejecute correctamente en el hook de Git, es necesario modificar el archivo .husky/pre-commit con el siguiente contenido:

npx lint-staged

Conclusión

Configurar Prettier, ESLint y Husky en un proyecto Angular es esencial para asegurar que el código mantenga un formato coherente, esté libre de errores y siga las buenas prácticas definidas por el equipo durante todo el ciclo de vida del proyecto.

Aunque la configuración inicial puede requerir un esfuerzo adicional, los beneficios a largo plazo en cuanto a mantenimiento y calidad del código justifican ampliamente el tiempo invertido. Estas herramientas contribuyen a mantener un código más robusto, limpio y fácil de gestionar, lo cual es fundamental en proyectos de cualquier tamaño.

Además de optimizar el flujo de trabajo y mejorar la legibilidad del código, la integración de Husky te permite automatizar otros procesos importantes. Por ejemplo, puedes utilizar Conventional Commits para agregar semántica a los mensajes de tus commits y mantener un historial de versiones organizado. También puedes emplear Husky para verificar la cobertura de tests antes de realizar un commit, o enviar código al repositorio.

Si te interesa profundizar en estos temas, como la implementación de Conventional Commits o la verificación del coverage de tests, no dudes en dejar tus inquietudes en los comentarios. Estaré encantado de escribir un artículo sobre ello.