ESLint es un linter que examina código Javascript. Sigue unas ciertas normas y criterios para que el código JavaScript siga unos estándares y estilos de calidad, favoreciendo la escritura de código de forma consistente. ESLint se ha establecido como herramienta estándar de facto, por encima de otras como JSHint o JSLint, las cuales han quedado prácticamente obsoletas a su lado.
ESLint es totalmente configurable y puedes indicarle qué criterios (llamados reglas) quieres que utilice y cuáles prefieres que ignore, adaptándose a las necesidades de cualquier empresa, programador o equipo de trabajo.
Instalación de ESLint
ESLint en JavaScript requiere como mínimo Node 6.14+ y NPM 3+ para funcionar, sin embargo, siempre recomendamos tener la última versión estable de Node/NPM instalada desde la web oficial, ya que otras versiones pueden carecer de funcionalidades como npx o similares. Aquí tienes una guía para instalar Node/NPM.
Para instalar ESLint en nuestro proyecto haremos lo siguiente:
$ npm install --save-dev eslint
Este comando instalará ESLint en JavaScript dentro del proyecto (como dependencia de desarrollo) y añadirá la referencia del paquete al fichero package.json (que debe existir previamente). Para ejecutar ESLint en nuestro proyecto, escribiremos npx eslint.
Configuración inicial de ESLint
Una vez instalado, en la carpeta raíz de nuestro proyecto escribimos lo siguiente:
$ npx eslint --init
Esto arrancará un asistente para configurar ESLint en nuestro proyecto, preguntándonos algunas cuestiones sobre el proyecto a revisar. Hagamos un repaso rápido:
Modo de ESLint
Esta opción nos permite seleccionar el modo en el que funcionará el linter. Se recomienda utilizar la última opción, la más completa de todas.
? How would you like to use ESLint?
To check syntax only
To check syntax and find problems
> To check syntax, find problems, and enforce code style
La primera opción, revisa solo la sintaxis de nuestro código. La segunda opción, además, ayuda a encontrar potenciales problemas en el código. Por último, la tercera opción (la opción recomendada), hace todo lo anterior y, además, sigue unas determinadas normas de estilo para ayudar al programador a corregir malos hábitos o malas prácticas y hacer el código más coherente y legible.
Módulos Javascript
Esta opción nos permite seleccionar la forma en la que importamos código JavaScript desde otros archivos. Si estamos utilizando las palabras clave import y/o export en nuestro código, deberemos seleccionar la primera, ya que estamos utilizando módulos ESM; sin embargo, si utilizamos require o module.exports, deberemos utilizar la segunda porque estamos utilizando módulos de NodeJS:
? What type of modules does your project use?
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
Framework Javascript
Esta opción nos da la posibilidad de indicar si estamos utilizando un framework JavaScript específico como React o Vue.js y, así, poder adaptarse a la sintaxis correspondiente de estos frameworks. Si no fuera el caso, seleccionamos None of these:
? Which framework does your project use?
React
Vue.js
> None of these
Soporte de TypeScript
Si estamos transpilando nuestro código de TypeScript a JavaScript, podemos indicar en el linter que estamos utilizándolo. De lo contrario, simplemente indicamos que no lo utilizamos.
? Does your project use TypeScript?
> No
Yes
¿Javascript cliente o servidor?
Debes tener cuidado con esta opción. Las opciones no son exclusivas, sino que podemos marcar una o varias (utilizando SPACE). Con esta opción enfocamos el linter para revisar código teniendo en cuenta si va dirigido exclusivamente a navegadores (sin Node), si es código JavaScript de NodeJS o un híbrido donde se usan ambas:
? Where does your code run?
> Browser
> Node
Guía de estilo Javascript
Esta es una de las opciones más importantes, ya que con ella nutrimos al linter con la información necesaria para saber cómo corregir nuestro código JavaScript. La opción recomendable es la primera, donde le decimos que utilice una guía de estilo popular. Posteriormente, ESLint nos ofrecerá una de las tres más famosas (aunque se pueden utilizar otras fuera del asistente).
? How would you like to define a style for your project?
> Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)
La segunda opción, Answer questions about your style, nos preguntará una serie de cuestiones sobre nuestro código para ir creando una serie de reglas de forma manual.
La última opción, Inspect your JavaScript file(s), analizará los ficheros de código para inferir una configuración a partir de ellos.
Así lograremos exitosamente la instalación y configuración de ESLint en JavaScript para ayudarte a corregir diferentes errores en la creación de tu código.