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 :
- Primero pasos con TypeScript con Microsoft Visual Studio Code
- Integración de GitHub / Git / GibHub Desktop y MS Visual Studio Code
- Instalación de Jest con TypeScript y MS Visual Studio Code
- Instalación de Prettier en MS Visual Studio Code
- Introducción a Parcel
También me gustaría que vieras este video de 2 minutos para entender dónde estamos y a dónde vamos.
En lo que pretendo estar entretenido las próximas semanas para jugar con #TypeScript. Recomendaciones de @cesalberca Me ha dicho que, cuando haya cacharreado, en un rato lo montamos todo 😭😭 pic.twitter.com/gdfBRFMQiT
— Roberto Canales Mora (@rcanalesmora) January 8, 2020
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.
var OFF = 0,
WARN = 1,
ERROR = 2;
// "off" or 0 - turn the rule off
// "warn" or 1 - turn the rule on as a warning (doesn't affect exit code)
// "error" or 2 - turn the rule on as an error (exit code will be 1)
module.exports = {
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
extends: ["plugin:@typescript-eslint/recommended"],
rules: {
"prefer-const": [
"off",
{
destructuring: "any",
ignoreReadBeforeAssign: false
}
]
}
};
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
