Código limpio y consistente. ESLint + Prettier en tus proyectos con React.
Tags: react, eslint, prettier, javascript
Published: 2019-12-12 23:49:42

Mantener la calidad de código en los proyectos se ha vuelto un dolor de cabeza, especialmente cuando se trabaja en equipo. Hoy en día es importante estandarizar el estilo y formato de código, esto puede traer distintos beneficios:

- 👍🏼 Asegurar que el equipo utilice buenas prácticas de codificación.
- ⏱ Reducir el tiempo de _code review_ dejando de lado errores de sintaxis y estilo.
- ⚠️ Evitar _logs_ no deseados en producción.
- 🐞 Identificar errores antes de compilar.
- 💻 Conocer y adoptar las prácticas de codificación que implementan grandes empresas (Airbnb, Google).

[ESLint](https://eslint.org/) y [Prettier](https://prettier.io/) nos ayudarán a seguir un estilo en nuestro código, mejorando la calidad, legibilidad y mantenibilidad.

###¿Qué es ESLint?
[ESLint](https://eslint.org/) es un linter para Javascript. Su función principal es analizar nuestro código, buscar problemas y resolverlos. Dispone de una gran cantidad de [reglas](https://eslint.org/docs/rules/), con base en su documentación podemos especificar lo que deseamos aplicar.

###¿Qué es Prettier?
[Prettier](https://prettier.io/) es un _formateador de código_ con soporte para muchos lenguajes e integración con la mayoría de editores de código. Su función principal es analizar y re-escribir código aplicando el mismo formato.

###Implementación
Para esta implementación tu puedes hacer uso de cualquier herramienta o framework basado en react. Particularmente yo he decidido utilizar [Next.js](https://nextjs.org/). Puedes hacer uso de [yarn](https://yarnpkg.com/) o [npm](https://www.npmjs.com/) para instalar las dependencias, toma en cuenta que todo deberá ser instalado como **dependencias de desarrollo**.

Comencemos instalando **ESLint** y **Prettier**, además de los paquetes necesarios para que se integren uno al otro correctamente. 
```shell
### yarn
yarn add -D eslint prettier babel-eslint eslint-config-prettier eslint-plugin-prettier
### npm
npm i -D eslint prettier babel-eslint eslint-config-prettier eslint-plugin-prettier
```
- [babel-eslint](https://www.npmjs.com/package/babel-eslint): Permite que **ESLint** entienda código Javascript más avanzado ES6+.
- [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier): Desactiva todas las reglas de **ESLint** que puedan entrar en conflicto con **Prettier**.
- [eslint-plugin-prettier](https://www.npmjs.com/package/eslint-plugin-prettier): Permite visualizar issues de **Prettier** como reglas de **ESLint**.

Ahora que hemos agregado las dependencias necesarias, es tiempo de crear los archivos de configuración para **ESLint** y **Prettier**. En la raíz de nuestro proyecto vamos a crear un archivo llamado `.prettierrc` con el siguiente contenido:

```json
{ 
    "printWidth": 100,
    "trailingComma": "all",
    "tabWidth": 4, 
    "semi": true, 
    "singleQuote": false
}
```

**Prettier** ofrece algunas otras [opciones](https://prettier.io/docs/en/options.html) que si lo deseas puedes quitar o agregar de acuerdo a tus preferencias.

El siguiente paso es crear el archivo `.eslintrc` al mismo nivel que el anterior, agregando lo siguiente:

```json
{
    "extends": [
        "prettier",
        "prettier/react"
    ],
    "parser": "babel-eslint",
    "plugins": [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error"
    }
}
```
De igual forma que en el archivo anterior, tú puedes editar las [reglas](https://eslint.org/docs/rules/) de este archivo como lo prefieras.


###Guía de estilos Airbnb
Como lo comente al inicio de este post, podemos implementar las guías de estilos de Airbnb o Google. Yo recomiendo utilizar la guía de estilos de Airbnb, en mi experiencia considero que esta muy completa y se actualiza constantemente, además de tener soporte para React.

Vamos a proceder instalando los siguientes paquetes:
```shell
### yarn
yarn add -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
### npm
npm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
```
- [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb): Proporciona el `.eslintrc` de Airbnb para hacer uso de su configuración de una  forma compartida.
- [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import): Da el soporte necesario para la importación y exportación en ES6+ previniendo issues con las rutas y nombres de archivos.
- [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y): Revisa las reglas de accesibilidad dentro de los elementos JSX.
- [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react): Habilita reglas específicas de **ESLint** para React.

Después de la instalación, es necesario actualizar el archivo `.eslintrc` para poder extender la configuración de Airbnb.

```json
{
    "extends": [
        "airbnb",
        "prettier",
        "prettier/react"
    ],
    "parser": "babel-eslint",
    "plugins": [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error"
    }
}
```

Como podrás darte cuenta, hemos extendido la configuración que **ESLint** tiene por default. Ahora tenemos soporte para la guía de estilos de Airbnb y **Prettier**.

###Integración en Visual Studio Code
Es tiempo de añadir un _plus_ a nuestra configuración. Para este caso vamos a hacerlo en [Visual Studio Code](https://code.visualstudio.com/) pero es posible realizar la misma integración en cualquier otro editor. 

1. Instalar la extensión de [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
2. Instalar la extensión de [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
3. Ir a las preferencias de Visual Studio Code y agregar las siguientes dos líneas al archivo `settings.json`
```json
{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}
```
Con esto configurado, **ESLint** y **Prettier** harán su trabajo en cada uno de nuestros archivos cuando estos sean modificados y guardados.