¿Qué es ESLint en JavaScript? 

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada.