Integrando Prettier con ESLint
Tags: webdev, javascript, prettier, eslint
Published: 2020-02-27 18:24:02

> *Este post fue publicado originalmente en mayo de 2019.*

En el siguiente artículo vamos a conocer [Prettier](https://prettier.io/) y cómo podemos integrarlo con [ESLint](https://eslint.org/) para mejorar nuestro flujo de trabajo.

Configurar estas herramientas será una inversión que haremos una vez y sus beneficios los notaremos durante todo el proyecto.

## ¿Qué es ESLint?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vvkde4oarpvkciqmxnws.png)

Si aun no lo conocéis, ESLint es un linter para JavaScript y JSX. Ayuda a identificar e informar sobre patrones que se encuentran en el código con el objetivo de evitar errores.

Principalmente, hay que tener en cuenta que las reglas de los linters se dividen en dos categorías:

### Reglas de formato

*Por ejemplo: longitud de línea máxima, tipo de indentación, tamaño de la indentación...*

### Reglas de calidad del código

*Por ejemplo: no permitir variables que no se usen, no permitir declaraciones de variables globales...*

Son las más importantes que ofrecen los linters ya que pueden detectar errores en el código.

## ¿Qué es Prettier?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o8gyc53s3dmnvro0tvd6.png)

Prettier es una herramienta para formatear el código, tiene soporte para *HMTL, CSS, JavaScript, JSX, TypeScript, GraphQL...* entre otros.

Se encarga de garantizar que el código se ajuste a un estilo consistente de manera automática. Para ello, analiza el código y lo re-escribe cada vez que se ejecuta.

Su objetivo es acabar con los debates sobre el estilo del código, de ahí que no trate de cubrir todos los casos de uso. Es una herramienta dogmática, por tanto, los debates sobre estilo simplemente pasarán a ser debates sobre qué [opciones de Prettier](https://prettier.io/docs/en/options.html) usar.

Gracias a Prettier ahorraremos tiempo y energía en hacer que el estilo de nuestro código esté normalizado.

## Configuración

Como hemos visto, cada herramienta tiene sus puntos fuertes e intentaremos aprovechar lo mejor de cada una. En definitiva, ESLint estará enfocado en lo relacionado a la calidad del código mientras que Prettier se encargará de su formato.

En la siguiente configuración nos centraremos en su uso con *JavaScript*.

### Instalar Dependencias

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

* [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier): desactiva las reglas de ESLint que entren en conflicto con Prettier.
* [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier): añade una regla que formatea el contenido usando Prettier.

### Configurar ESLint

En nuestra configuración de ESLint añadiremos las siguientes líneas:

```js
// .eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  rules: {
    'prettier/prettier': 'warn',
  },
}
```

De esta manera será ESLint el que se encargará de ejecutar Prettier.

> He añadido *eslint:recommended* a modo de ejemplo, se puede usar la configuración que deseemos. Por otro lado, también he configurado que los elementos que no cumplan con las reglas de Prettier se muestren en forma de aviso, si queremos que muestren en forma de error simplemente hay que sustituir *'warn'* por *'error'*.

### Configurar Prettier

En la configuración de Prettier vamos a añadir algunas reglas, por ejemplo:

```js
// .prettierrc.js

module.exports = {
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'all',
};
```

### Script de npm

Añadiremos la siguiente línea en los scripts de nuestro package.json

```json
"scripts": {
  "lint:fix": "eslint --fix ./src"
}
```

*ESLint* corregirá los problemas que sea capaz de resolver automáticamente y aplicará el estilo al código con *Prettier*, tal y como hemos configurado anteriormente.

## Resultado

Si con la configuración anterior ejecutamos el script con `npm run lint:fix` obtendremos para el siguiente fichero de ejemplo un resultado como este:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ix54m30x4s7tbm2xqbo.png)
<figcaption>Antes de ejecutar el script</figcaption>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/whglsyagr88ym53cyc9d.png)
<figcaption>Después de ejecutar el script</figcaption>

Ahora podremos cambiar entre proyectos con distintas configuraciones de manera cómoda, no deberemos preocuparnos si usar 2 espacios o 4, comillas simples o dobles… simplemente nos centraremos en la solución que estamos implementando.

---

## Integración con VSCode

Vamos a configurar VSCode para que ejecute ESLint y dé formato al código cuando guardemos un fichero, para ello:

1. Instalaremos la [extensión ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) en caso de no tenerla.
2. Abriremos preferencias de VSCode y haremos click en el primer icono situado en la esquina superior derecha para editar el fichero settings.json y añadimos lo siguiente:

```json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/adkb5rj0yt2k20jrbv3o.gif)

### Conflictos con la opción editor.formatOnSave

En caso de tener configurado que VSCode formatee nuestro código al guardar un fichero (con la opción editor.formatOnSave), deberemos desactivarla para JavaScript y JSX, ya que de este proceso se encargará ESLint.

```json
{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

## Pre-commit hook

Si queremos asegurarnos de que el código que se sube al repositorio cumple con las reglas establecidas, podemos configurar un [hook de git](https://git-scm.com/docs/githooks) para automatizar el proceso.

Una de las ventajas es que es agnóstico al editor que utilicemos, además de ser muy útil si trabajamos en equipo.

### Instalar dependencias

```shell
npm install --save-dev husky lint-staged
```

* [husky](https://github.com/typicode/husky): es una herramienta que facilita la configuración de hooks de git.
* [lint-staged](https://github.com/okonet/lint-staged): es una herramienta para ejecutar linters sobre los ficheros que se encuentren preparados para el commit.

### Configurar Husky

En la configuración de Husky añadiremos lo siguiente:

```js
// .huskyrc.js

module.exports = {
  hooks: {
    'pre-commit': 'lint-staged'
  }
};
```

Ahora cada vez que vayamos a hacer un commit antes se disparará el hook *pre-commit* y este ejecutará *lint-staged*.

### Configurar Lint-staged

En la configuración de Lint-staged añadimos lo siguiente:

```js
// .lintstagedrc.js

module.exports = {
  '*.js': ['eslint --fix', 'git add']
};
```

Para todos los ficheros con extensión *.js* ejecutará ESLint para corregir los problemas automáticamente y dará formato a los ficheros preparados, una vez modificados vuelve a prepararlos para el commit.

> Recuerda que **ESLint** ejecutará **Prettier** tal y como vimos antes.

## Repositorio de ejemplo

En el siguiente enlace he preparado un ejemplo con el mítico [create-react-app](https://github.com/facebook/create-react-app) usando la configuración de ESLint que ofrece por defecto (la cual no incluye reglas de estilo) e integrando lo que hemos visto en el artículo.

{% github capua/cra-prettier-eslint-example no-readme %}

¡Nos vemos en la próxima publicación!