ESLint y Prettier para Angular en 2 minutos

El autor posee los derechos de la imagen. Los iconos han sido extraídos desde sus respectivas páginas web.

En el desarrollo de aplicaciones web, utilizando Angular como framework de referencia, mantener un código limpio, consistente y bien formateado es crucial para la calidad y mantenibilidad del proyecto. Dos herramientas para lograr dicha finalidad son ESLint y Prettier.
Vamos a explicar como implementarlas en nuestros proyectos de Angular.

¿Qué es ESLint y qué es Prettier?

ESLint es una herramienta de análisis estático de código enfocada en encontrar y corregir problemas en el código JavaScript y en otros lenguajes basados en este, como TypeScript; se utiliza para mantener un código más limpio, consistente y libre de errores.
Prettier es una herramienta de formateo de código que se utiliza para asegurar que el código fuente siga un estilo de formato consistente. Soporta múltiples lenguajes de programación y se integra fácilmente con diversos entornos de desarrollo y editores de texto.

¿Cómo lo instalamos?

Primero, tendremos que ubicarnos dentro de nuestro proyecto de Angular mediante una terminal. E instalaremos ESLint introduciendo el siguiente comando:

ng add @angular-eslint/schematics

Veremos que se han modificado dos archivos y se ha añadido uno. Los dos archivos modificados son el package.json y el angular.json; y el añadido .eslintrc.json. Pero los dos más importantes son el package.json y el .eslintrc.json.
En el package.json se han añadido las dependencias de ESLint y se ha creado un comando nuevo, que es el lint. Con este comando lintaremos todo el proyecto escribiendo el comando ng lint en la terminal. Y en el .eslintrc.json es donde especificaremos todas las normas que regirán nuestro proyecto.

Segundo, instalaremos Prettier y lo haremos introduciendo el siguiente comando:

npm install prettier --save-dev

Con este comando hemos añadido la dependencia de Prettier a nuestro package.json. Para poder establecer nuestras reglas de Prettier tendremos que crear el siguiente fichero en el rootdel proyecto: .prettierrc.json. Tenéis el siguiente enlace para consultar las normas de Prettier disponibles.

Por último, para hacer que Prettier funcione con ESLint introduciremos el siguiente comando en la terminal:

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

Una vez instalado, dentro del fichero .eslintrc.json, incluiremos "plugin:prettier/recommended" en el siguiente apartado:

"overrides": [
        {
            "files": ["*.ts"],
            "extends": [
                "eslint:recommended",
                "plugin:@typescript-eslint/recommended",
                "plugin:@angular-eslint/recommended",
                "plugin:@angular-eslint/template/process-inline-templates",
                "plugin:prettier/recommended"
            ],
...

Si ejecutamos ng lint es muy probable que tengamos múltiples errores de linteo. Si queremos que los errores simples se solucionen de forma rápida escribiremos ng lint --fix; aunque es posible que algunos de ellos necesiten ser modificados manualmente por nosotros.

Conclusiones

A lo largo del artículo hemos instalado ESLint y Prettier y hemos logrado que trabajen entre ellos mediante el comando ng lint, ya que es importante mantener unas normas dentro de nuestros proyectos para poder tener un código limpio, consistente y bien formateado para la calidad y mantenibilidad del proyecto.