Cómo usar ESLint y Prettier para mejorar tu código JavaScript

Cuando creamos aplicaciones JavaScript. Sobretodo cuando lo hacemos en equipo. Es muy difícil mantener el orden de nuestro código. ESLint y Prettier se encargaran de definir y mantener el orden de nuestras aplicaciones.

Cómo funcionan

ESLint es un linter de código JavaScript. Su función es analizar el código de nuestra aplicación, detectar problemas en por medio de patrones y si esta a su alcance resolverlos él mismo.

Por otro lado, Prettier es un formateador de código. Tambien analiza nuestro código JavaScript. Pero no solo detecta problemas (como la longitud de una linea, o si una variable no se usa nunca); re-escribe nuestro código cada vez que salvamos un archivo, permitiéndonos ver y entender cuales son los problemas de nuestra aplicación.

Usando ambas herramientas obtendremos un entorno de trabajo mucho más cómodo, limpio y eficaz. Ahora, aprendamos a usar estas herramientas!

Instalación y configuración base de ESLint

Comencemos instalando ESLint y babel-eslint. Este ultimo paquete le ayudara a eslint a entender código JavaScript un poco más avanzado que ES6:

yarn add eslint babel-eslint -D

Después de la instalación, podemos usar una herramienta de eslint para crear nuestra configuración base por medio de preguntas. Podemos usarla corriendo el siguiente comando:

./node_modules/.bin/eslint --init

Ahora tenemos que responder algunas preguntas para que ESLint cree nuestro archivo de configuración y podamos añadirle otras herramientas como Prettier. Yo recomendaría contestar las preguntas de la siguiente forma:

How would you like to configure ESLint?

Podemos configurar ESLint respondiendo algunas preguntas sobre nuestro código, usar una guía de estilos popular o dejar que eslint inspeccione nuestros archivos JavaScript y con base a esto arme la configuración más adecuada. Responde usar una guía de estilos. Por ser guías de estilos bastante populares están muy bien probadas y documentadas, así que son la mejor opción.

Which style guide do you want to follow?

Podemos usar la guía de estilos de Google, de AirBnB o de Standard. Yo recomiendo fielmente usar la guía de estilos de AirBnB ya que es bastante completa y actualizada. Tambien tiene soporte para React y CSS in JS.

Do you use React?

En realidad la pregunta no es si usamos React, sino si usamos JSX, o JavaScript XML; un estándar para escribir código HTML dentro de código JavaScript que por supuesto tiene reglas y convenciones de linteo. Si estas construyendo un proyecto con Reactjs debes responder Y, en caso contrario N.

What format do you want your config file to be in?

Por último debemos elegir el formato de archivo para nuestra configuración de ESLint. Puedes usar JavaScript, YAML o JSON. Normalmente uso JSON para mis archivos de configuración, pero en este caso poco importa. Elige con el que te sientas mas cómodo.

Habiendo respondido la ultima pregunta, ESLint instalara los paquetes necesarios para seguir las instrucciones que le dimos con las respuestas y creara un archivo de configuración llamado .eslintrc.json. En este archivo está nuestra configuración. Ahora vamos a editarlo para añadir las configuraciones necesarias de Prettier.

Configuración de ESLint usando Prettier

Con nuestra configuración base lista, podemos instalar los siguientes paquetes de prettier para que junto con ESLint nos ayuden a crear un entorno de trabajo mucho mejor:

yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier

Instalados estos paquetes, podemos ir a nuestro archivo de configuración de ESLint y añadir la configuración necesaria para usar Prettier. Tendremos que añadir las siguientes instrucciones:

{
	// añade la opción "parser" con "babel-eslint""parser": "babel-eslint",

	// añade "prettier" (y si quieres "prettier/react") a las opciones de "extends""extends": ["airbnb", "prettier", "prettier/react"],

	// y por ultimo, en la llave de "plugins" añade el plugin de eslint para prettier"plugins": ["prettier"]

	// ...
}

Ahora que tenemos nuestro archivo de configuración listo, podemos añadir eslint a la sección de scripts de nuestro package.json. Así podemos usar eslint para revisar que nuestro código JavaScript este funcionando como lo esperamos:

// package.json"scripts" {
	"lint": "eslint ./", // solo para revizar nuestros archivos"lint:fix": "eslint ./ --fix"// corrigiendo errores
},

Ahora si un una consola de comandos corremos npm run lint o yarn lint, podemos ver que dependiendo el código JavaScript que hallamos escrito tendremos errores, archivos sobre escritos, y todo lo que necesitamos para escribir un mejor código JavaScript.

Recuerda que puedes añadir o editar reglas de nuestras guías de estilo base, y para eso puedes seguir los siguientes tutoriales:

• Prettier Options
• ESLint Rules
• Wes Bos - How to Setup VS Code + Prettier + ESLint
• Add ESLint & Prettier to VS Code for Create React App

Lint Staged

Con nuestra configuración de ESLint lista, ya podemos escribir código JavaScript mucho mas limpio y ordenado. Pero podemos hacer aun mas! Usando lint-staged podremos estar seguros de que el código que subimos a Github o cualquier otro repositorio de Git siempre este revisado por ESLint y Prettier.

Instalación de Lint Staged

yarn add lint-staged husky

Configuración de Lint Staged

// .lintstagedrc.json

{
  "*.js": ["eslint --fix", "git add"]
}

Nuevo Script en el package.json

// package.json"scripts": {
	"precommit": "lint-staged",
},

Con esta nueva configuración en nuestro proyecto, podemos estar seguros de que el código que escribimos junto con nuestro equipos de desarrollo siempre estará linteado por ESLint y Prettier gracias a Lint Staged.

Ahora que sabes usar ESLint y Prettier para mejorar tu entorno de trabajo, es tu turno de probarlos. ¿Por qué no nos cuentas en los comentarios qué tal te han parecido estas herramientas? Estaremos encantados de escuchar tu experiencia.

Tambien puedes ver mis archivos de configuración para ESLint, Prettier y Lint Staged en el siguiente link: ESLint + Prettier + Lint Staged config files.

Hasta pronto! 😄