Código limpio y consistente. ESLint + Prettier en tus proyectos con React.

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 y Prettier nos ayudarán a seguir un estilo en nuestro código, mejorando la calidad, legibilidad y mantenibilidad.

¿Qué es ESLint?

ESLint 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, con base en su documentación podemos especificar lo que deseamos aplicar.

¿Qué es Prettier?

Prettier 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. Puedes hacer uso de yarn o npm 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.

### 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: Permite que ESLint entienda código Javascript más avanzado ES6+.
• eslint-config-prettier: Desactiva todas las reglas de ESLint que puedan entrar en conflicto con Prettier.
• 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:

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

Prettier ofrece algunas otras opciones 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:

{
    "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 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:

### 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: Proporciona el .eslintrc de Airbnb para hacer uso de su configuración de una forma compartida.
• 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: Revisa las reglas de accesibilidad dentro de los elementos JSX.
• 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.

{
    "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 pero es posible realizar la misma integración en cualquier otro editor.

1. Instalar la extensión de ESLint
2. Instalar la extensión de Prettier
3. Ir a las preferencias de Visual Studio Code y agregar las siguientes dos líneas al archivo settings.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.

Comments

[Emmanuelle Laguna]

Hola @ecksarabia creo que hay un cambio y eslint.autofixOnSave esta depreciado, pero se puede usar

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

[Erick Sarabia]

Listo!, he actualizado la configuración. Gracias por el dato @emmanuellesoy

[Emmanuelle Laguna]

Acabo de instalar VS Code en una maquina nueva, volví a este POST y lo agradezco de nuevo