Creando un API REST con swagger Node (parte 5)

Mejoraremos el estilo de nuestro código con ESLint

ESLint para mejorar nuestro estilo de código

Para mejorar nuestro estilo de código instalaremos ESLint y usaremos la configuración por defecto del plugin de airbnb.

airbnb como configuración por defecto

Esto nos garantizará una mayor claridad y homogeneidad de código en nuestros proyectos, y además, nos avisará de errores de programación al instante, si lo instalamos como plugin en el editor que estemos utilizando. Es casi casi como poner ruedines a nuestra bicicleta de javascript.

Además, vais a notar una gran mejoría y mayor productividad con ESLint en muy poco tiempo, porque te avisa de problemas que luego acaban apareciendo en tiempo de ejecución y que a la hora de programar no es fácil detectar.

Instalación de EsLint en nuestro proyecto

En la página del repositorio npm de ESLint indican como hacerlo:

$ npm install eslint --save-dev

Una vez que lo tengamos instalado en la paquetería de desarrollo de nuestro proyecto, inicializamos eslint

./node_modules/.bin/eslint --init
? How would you like to configure ESLint? (Use arrow keys)
❯ Answer questions about your style 
 Use a popular style guide 
 Inspect your JavaScript file(s)

Se nos pregunta cómo queremos configurar ESLint y elegimos una guía popular (es mejor así, ya que nos evita tener que crear nuestras propias reglas de estilo). A continuación se nos presentan estas tres alternativas:

 Google 
 Airbnb 
 Standard

Vamos a elegir la de Airbnb en nuestro caso, ya que se ha convertido en una guía de estilo muy popular y que parece que gusta a todo el mundo.

? Do you use React? (y/N)

Seleccionamos la opción N (no vamos a usar React en nuestro proyecto).

? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript 
 YAML 
 JSON

Elegimos JSON como formato del fichero de configuración de ESLint.

El fichero de configuración de ESLint se llama .eslintrc.json y tiene simplemente esto:

{
 "extends": "airbnb-base"
}

Ojo, que es un fichero oculto como todos los que empiezan por . en linux.

Ejecución manual de eslint en nuestro proyecto:

Vamos a introducir el siguiente script en el fichero package.json:

"lint": "node_modules/.bin/eslint api/** app.js"

Quedándonos el fichero package.json así:

Ahora para ejecutarlo, basta con hacer:

$ npm run lint

Con lo que obtenemos que hay unos 318 problemas en nuestro código que tendremos que arreglar.

Para arreglarlo, lo recomendable es tener instalado en nuestro editor de código (en nuestro caso Visual Studio Code) un plugin de ESLint que nos ayude con la tarea.

Plugin de ESLint para Visual Studio Code

Una vez instalado, iremos viendo los problemas en el editor.

Errores que nos muestra ESLint en Visual Studio Code una vez instalado el plugin

Situando el ratón encima de cada error nos explica el error de que se trata y la forma de arreglarlo.

Si no lo tenemos claro, es recomendable visitar la web de ESLint donde se nos muestra más información incluyendo algunos ejemplos.

Por ejemplo, para el caso de use strict, que es el primer fallo que se nos indica:

Es interesante consultar la guía de ESLint si no tenemos claro como arreglar el problema

La guía de airbnb tiene desactivado el use strict, así que hay que eliminarlo.

Con un poco de paciencia, vamos a dejar arreglado nuestro primer controlador (básicamente nos va diciendo que quitemos el use strict y que usemos let o const en lugar de var. El resto parece que estaba todo bastante bien ;-)

gamesystem.controller.js una vez arreglados los fallos de ESLint

Dejo como es habitual el enlace al repositorio completo de todo el proyecto una vez arreglados todos los problemas de EsLint.

diegopm2000/GameCollectorApiREST_v5

NOTA: Al final he preferido integrar antes ESLint en el proyecto que pasar a las pruebas unitarias, ya que mi idea es que también lo usemos para la construcción de la batería de pruebas.

Parte siguiente del tutorial: pruebas unitarias