Verificación de formato de código con Eslint

0
284

Cuando trabajas con más gente en un proyecto, parece razonable que normalicemos un estilo, no solo la indentación y el formato (que podemos usar prefttier) sino que podemos adicionalmente establecer reglas de qué se permite o no, por ejemplo: no permitir pasar código a otro entorno si contiene variables que no se utilizan o usar comillas simples y no dobles.

Para ello, como para casi todo en el mundo del desarrollo, hay muchas opciones. Os voy a explicar una de ellas que es Eslint que vale tanto como para JavaScript como para TypeScript.

Antes de empezar recordar que este tutorial forma parte de una cadena de tutoriales en las que pretendo simplemente probar tecnologías actuales, aquí abajo podrás encontrarlos :

 

También  me gustaría que vieras este video de 2 minutos para entender dónde estamos y a dónde vamos.


Mi equipo es Mac

macOS Catalina
Versión 10.15.2

MacBook Pro (15-inch, 2018)
Procesador 2,9 GHz Intel Core i9 de 6 núcleos
Memoria 32 GB 2400 MHz DDR4
Gráficos Intel UHD Graphics 630 1536 MB


Os recomiendo ir al portal https://eslint.org/ para ver un poco sobre ello (sobre todo las reglas).

También leer otros tutoriales muy completos, como estos:

https://thesoreon.com/blog/how-to-set-up-eslint-with-typescript-in-vs-code

https://scotch.io/tutorials/linting-and-formatting-with-eslint-in-vs-code

 

Os recomiendo visitar información adicional porque aunque es simple me ha llevado un rato hasta que me ha funcionado: https://www.npmjs.com/package/eslint

Instalamos con NPM.

npm install eslint –save-dev.

La verdad es que es muy intuitivo porque te sale un menú y le vas diciendo lo que quieres utilizar. Elijo chequear sintaxis, encontrar errores y reforzar el estilo.

Le decimos el estilo de los módulos.

Seleccionamos frameworks vamos a utilizar: ninguno de momento.

Confirmamos que vamos a usar TypeScript, que ya viene el soporte.

Nos pregunta donde vamos a ejecutar el código: como estoy haciendo un juego le digo que en el browser.

Nos pregunta qué estilo queremos.

Seleccionamos el formato que queremos del fichero de configuración. Me ha parecido que había más referencias de ejemplos con JavaScript.

Y nos lo instala todo con npm.

El fichero de configuración es .eslintrc.js

Y ejecutando el comando eslint en el fichero deseado nos canta los errores.

Tenemos la opción de corregirlo o de cambiar las reglas 🙂

Si vamos a las reglas, podemos decir que queremos que deje pasar y qué no.

En este caso le digo que aunque una variable no se reasigne desde la inicialización que no me de un error si no la declaro con const. Es decir, desactivo la regla.

En la captura podéis ver el antes y el después.

En este caso, para que tenga efecto Eslint en Visual Studio Code, no solo en línea de comando, tenemos que activar el pluggin.

Vemos ya los problemas en el entorno.

Y podemos configurar las reglas o hacer los cambios con el menú contextual.

Podemos configurar el comportamiento al guardar.

Vemos que es bastante interesante.

Ahora se plantea un problema: hay que establecer normas grupales, configurar los entornos de todos, formar, divulgar, etc.

Parece además razonable que esto (normalización de código y revisión de reglas) no se haga en el repositorio local sino centralizadamente.

Para eso tendremos la opción de hacerlo con Github Actions.

Aquí te dejo el enlace al siguiente tutorial:

Configurando Github Actions junto con TypeScript, Jest, Parcel, Eslint y Prettier

Dejar respuesta

Please enter your comment!
Please enter your name here