💊 Cómo configurar ESLint y Prettier para tus aplicaciones en React

Iván López Hdez
Nov 7 · 5 min read
Photo by Todd Quackenbush on Unsplash

Hoy en día crear aplicaciones robustas, escalables y mantenibles es una tarea bastante tediosa y compleja.

Afortunadamente contamos con herramientas que nos permiten mitigar en cierta medida esto. Es por ello que herramientas como Jest, Enzyme/React testing library o Cypress/Test café nos ayudan y deberían ser el cimiento de cualquier aplicación de hoy en día.

Como parte fundamental de estas herramientas necesitamos un guía que nos ayude a tener un código mas limpio, legible y a cumplir unas reglas que todo desarrollador en el mismo proyecto deberá cumplir.


ESLint

Es un linter que va a analiza nuestro código sin ejecutarlo buscando los errores o malas prácticas. En otras palabras, eslint es como un corrector ortográfico del código, el cual gracias a unas reglas que le vamos a definir va a buscar fallos y mostrarnoslo.

Instalación de ESLint 💾

Para instalar en nuestro proyecto de react tendremos que ejecutar la siguiente linea en nuestro terminal:

npm i --save-dev eslint eslint-plugin-import eslint-plugin-react 

Nota: No es necesario instalar babel-eslint si has creado tu aplicación con create-react-app ya que este lo trae en los scripts por defecto.

También en el caso de que nuestro IDE para programar sea VSCode podemos instalar una extensión que integra eslint en el editor. Para ello tenemos que buscarlo en el panel de extensiones del VSCode y darle al botón de instalar.

Configure ESLint 👀

Lo bueno de ESLint es que es totalmente configurable. Todo lo que tenemos que hacer crear un archivo llamado.eslintrc en la raíz de nuestro proyecto y ya estamos listos para usarlo.

Nota: También es posible agregar la configuración de ESLint en el archivo package.json. Para esto tendremos que poner la configuración del eslint dentro del parámetro eslintConfig como un objeto.

Este archivo de configuración hay que definirlo como un objeto JSON, el cual las siguientes opciones son las más comunes:

parserOptions

Indica a ESLint como quieres que interprete tu código. En la mayoría de los casos vamos a usar la versión más reciente de ECMAScript (ES6, ES2018, etc.) para ello usaremos ecmaVersion . También podemos definir si vamos a usar import y export mediante la declaración de sourceType cómo module.

environment

environment define variables globales predefinidas que estas usando en tu proyecto. Por ejemplo, si defines jest a truenos va a permitir usar variables de Jest en tus archivos de test como como por ejemplo describe, it o test. De otro modo, ESLint no sabría identificar estas variables o métodos y marcaría un error.

globals

La regla no-undef nos lanzara un warning cada vez que se llame a una variable que no está definida en el mismo archivo. Si queremos que hayan algunas variables globales que se salten esta regla tendremos que definirlas aquí.

plugins

los plugins definen un conjunto de reglas que tienen un mismo propósito. Por ejemplo si usamos eslint-plugin-react vamos a poder utilizar reglas para nuestra aplicación en React

Precaución: hay que instalar los plugins como dev dependency si quieres que funcionen.

rules

Estas son las reglas de las que ya hablamos previamente las cuales van a definir si nos va a mostrar un error error un warning warn o si no vamos a ser notificado en caso de que se cumpla off.

extends

Permite agregar a nuestra configuración otra desde otro archivo. Esto nos permite agregar guías de estilos populares como las de Airbnb, Google o Standard.

De este modo nuestro archivo base para un proyecto de React sin definir tipos ni integrarlo con prettier sería algo como esto:

Ene este caso hemos agregado dentro de `parserOptions la posibilidad de que interprete jsx y ademas hemos agregado dentro de settings la opción de autodetectar la versión de react que se utiliza. Para más información de esto puedes encontrarla en la documentación del eslint-plugin-react.

Prettier 📝

Prettier es un formateador de código, es decir, va a modificar nuestro código de manera automática siguiendo unas reglas que definiremos.

Instalación de Prettier y configuración

Antes que nada deberíamos crearnos un archivo .prettierrc e la raíz de nuestro proyecto y instalar las dependencias y el plugin para VSCode en el caso de que usemos VSCode como IDE para programar.

npm i --save-dev prettier

La configuración básica de prettier que suelo usar en los proyectos de javascript es bastante simple:

Con esto estamos indicando que nos elimine los ; , que nos ponga comillas simples, que no nos ponga espacio entre los paréntesis y que inserte o corte en las líneas necesarias una misma línea cuando esta sea demasiado larga para verse en artículos que se publiquen o en pantallas pequeñas.

Si quieres ver todas las opciones que prettier nos ofrece podéis visitar la web oficial Prettier Options

Finalmente para que funcione nuestro ESLint con prettier tendremos que instalar:

  1. eslint-config-prettier : Nos permitir que no hayan conflictos entre las reglas definidas por ESLint.
  2. eslint-plugin-prettier : Con el que podremos definir reglas de prettier en nuestro ESLint
npm i --save-dev eslint-config-prettier eslint-plugin-prettier

Configuración final ESLint + Prettier 📦

Por último aunque no obligatorio vamos a agregar a los extends las opciones recomendadas del plugin de prettier.

De esta manera cada vez que abramos o editemos un archivo, ESLint buscará si hay alguna regla de las definidas que no se cumpla y subrayará en rojo, además de ayudarnos a arreglar el problema.

Conclusión

Los linters y los formatters son herramientas básicas que nos van a ayudar a igualar el estilo de todo el proyecto de esta manera todo el proyecto se regirá por el mismo código de estilo facilitando la mantenibilidad y legibilidad del código.