loading...

✅ Estandariza tu código con ESLint

alexcamachogz profile image Alex Camacho ・4 min read

cover

¿Inviertes mucho tiempo revisando tu código que creándolo? ¿Estás buscando herramientas para automatizar la revisión de tu código? ¿Conoces ESLint? No temas, este es el lugar indicado donde encontrarás las pautas para poder estandarizar tu código.

Cuando trabajamos en un equipo de desarrollo y hasta cuando estamos trabajando nosotros solos en un proyecto personal es bueno que sigamos ciertos estándares para que la estructura de nuestro código pueda ser entendida por cualquier otra persona, inclusive tu yo del futuro debe de ser capaz de entender el código que tu yo de pasado escribió.

¿Eso es un buen reto verdad? Lo sé, yo he estado ahí, mirando código de hace unos meses sin tener idea porque hice las cosas que hice.

Una de las principales acciones que podemos tomar para no caer en esta pesadilla, es implementar un código de calidad, ¿cómo logramos esto? aplicando los principios de código limpio según el languaje en el que estemos desarrollando.

No vamos a abordar en la escritura de código limpio en este articulo, pero pueden ver el siguiente video donde abordamos cómo podemos trabajar un código de calidad.

Código de Calidad

En esta ocasión nos vamos a centrar en la configuración de ESLint para organizar nuestro código JavaScript en un editor de código como es VS Code.

💫 ¿Qué es ESLint?

Primero déjenme platicarles un poco sobre qué es ESLint. Es una herramienta de linting para JavaScript y JSX, la cual tiene como función revisar nuestro código tratando de encontrar errores que podrían provocar problemas de compilación o quizá futuros bugs en nuestro desarrollo. Cuando ESLint encuentra algún error puede repararlo de forma automática o bien, nos puede advertir de ellos a través de diversos mensajes.

Esos mensajes se basan en un conjunto de reglas que podemos definir previamente y que son altamente configurables. Existen dos tipos de reglas, las cuales están encaminadas a:

  1. Garantizar la calidad de nuestro código, como por ejemplo detectar variables que nunca se usan a lo largo del proyecto.
  2. Mantener cierta homogeneidad en el formato de nuestro código, como el uso de puntos y comas al final de cada instrucción, los espaciados, etcétera.

ESLint nos permite configurar nuestras propias reglas o también utilizar las reglas que tienen definidas empresas como Google o AirBnB o también utilizar la guía de estilos standardjs. En este post vamos a configurar esta última opción.

👣 Primeros pasos

No está demás recordarles que debemos de contar con Node.js instalado ya en nuestro equipo antes de seguir adelante.

¿Ya tienen instalado Node? Perfecto.

Ahora necesitamos instalar ESLint, para hacer esto yo recomiendo instalarlo de forma global en nuestro sistema y después implementarlo en los proyectos que necesitemos. Para instalarlo de forma global utilizamos el siguiente comando:

npm install -g eslint

También no olvidemos que tenemos que instalar la extensión en VS Code, la cual la podemos encontrar en este enlace.

ESLint

Ya que realizamos la instalación de ESLint vía npm y también instalamos la extensión ya podemos empezar a configurar el proyecto.

⚙️ Configurando el proyecto

Los pasos para configurarlo son más fáciles de lo que parecen.

01.- Abrimos la terminal y navegamos al directorio del proyecto. Una vez ahí vamos a generar un proyecto npm, esto lo realizamos con el comando de npm init -y el cual nos generará un archivo de configuración para el proyecto.

npminit

02.- Como segundo paso usaremos el comando eslint --init para generar una rápida configuración de ESLint en el proyecto. Al utilizar este comando se nos irán desplegando una lista de opciones para configurarlo, de las cuales vamos a seleccionar las siguientes opciones:

Para que nos gustaría usar ESlint?

To check syntax, find problems, and enforce code style

Que tipo de modulos usa tu proyecto?

JavaScript modules (import/export)

Que framework, react o view?

None of these

Usamos typescript?

N

Donde corre nuestro proyecto?

browser

Como te gustaría definir un estilo para tu proyecto?

Use a popular style guide

Que guia de estilo te gustaría seguir?

standard

En que formato queremos nuestro archivo de configuración?

Javascript

Completando estos dos pasos ESLint quedará activo para utilizarse en todos los archivos con extensión .js de nuestro proyecto.

🔎 Resultados

Ya que terminamos de realizar la configuración de ESLint, podemos comprobar su funcionamiento generando un fragmento de código como este.

BeforeSlint

Podemos observar que nos muestra toda una lista de errores a corregir ya que no nos estamos apegando al estándar a la hora de escribir dicho código. Si tomamos acción con los errores señalados tendríamos como resultado un código apegado al estándar como el siguiente:

Alt Text

🧡 Concluyendo

Utilizar este tipo de herramientas como ESLint, nos permite despreocuparnos sobre como debe de lucir nuestro código y ocuparnos porque este realmente funcione como debería.

En lo personal recomiendo muchísimo el uso de este tipo de herramientas, ya que ayudan a seguir lineamientos que nos permiten trabajar en equipo con más programadores, pero generando un código que podría parecer de un solo programador.

Te animo a probarlo por ti mismo y definir si te gusta trabajar de esta manera o no, también prueba los demás estándares que mencionamos al principio como puede ser el de Google o el de AirBnB.

Sin más por esta entrega... Happy coding devs! 😄

Discussion

pic
Editor guide