Qué es ESLINT, para qué sirve y cómo utilizarlo

Por Darío Rivera

Publicado el 2020-10-17 en Javascript

A medida que desarrollamos en JavaScript de manera profesional nos encontramos con el problema de aplicar las buenas prácticas a través de todos nuestros proyectos y de todo el equipo de trabajo. Es por esto que existen herramientas como ESLINT para Javascript el cuál no ayudará estandarizando el desarrollado a través de nuesrtos proyectos.

ESLINT es un linter para JavaScript. Un Linter no es más que una herramienta que nos ayuda a cumplir las buenas prácticas de codificación y de estilos en un lenguaje de programación. ESLINT, es uno de los linters más populares para JavaScript. Pero cómo sabemos cuáles son las buenas prácticas en un lenguaje de programación ?, bueno para esto existen los presets, que son un conjunto de reglas establecidas como buenas prácticas.

Instalación

Lo primero que debemos hacer es instalar ESLINT mediante npm.

npm i --save-dev eslint

Después de esto podemos utilizar el siguiente comando para iniciar la configuración interactiva de eslint. Este comando requiere que tengas ya un archivo package.json.

npm init @eslint/config

Deberás elegir entre varias opciones las respuestas según el proyecto que tengas. En mi caso para efectos de testear eslint fueron las siguientes:

test » npm init @eslint/config
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · none
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · google
✔ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-google@latest
The config that you've selected requires the following dependencies:

eslint-config-google@latest eslint@>=5.16.0
✔ Would you like to install them now with npm? · No / Yes
Installing eslint-config-google@latest, eslint@>=5.16.0

added 1 package, and audited 85 packages in 726ms

13 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.json

Como puedes darte cuenta he utilizado el preset de google ya que funciona en este momento con la última versión de ESLint (Google Standard).

Al utilizar este preset verás que se crea un archivo llamado .eslintrc.json en la carpeta raíz de tu proyecto con el siguiente contenido:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "google"
    ],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
    }
}

Si utilizas algún editor de código como Visual Studio Code y tienes instalado el plugin de ESLint verás que automáticamente se marcan los errores.

Configuración

Puedes agregar un par scripts para facilitar el uso de la librería. Yo en lo personal utilizo los siguientes:

"scripts": {
    "lint-check": "npx eslint index.js ./src/**/*.js --fix-dry-run",
    "lint": "npx eslint index.js ./src/**/*.js --fix",
}

Uso

Para ver a eslint en funcionamiento vamos a crear el archivo man.js con el siguiente contenido.

window.onload = function() {
   document.querySelector("body").innerHTML = '<h1>Hello World!</h1>'
}

const upper =function( text) {
return text.toUpperCase();
}

Una vez hecho esto podemos ejecutar el comando de eslint para verificar el archivo main.js.

npx eslint main.js --fix-dry-run

Obtendremos una salida como la siguiente:

/path/dariorivera/www/test/foo.js
  2:1   error  Expected indentation of 2 spaces but found 3   indent
  2:27  error  Strings must use singlequote                   quotes
  2:70  error  Missing semicolon                              semi
  3:2   error  Missing semicolon                              semi
  5:7   error  'upper' is assigned a value but never used     no-unused-vars
  6:1   error  Expected indentation of 2 spaces but found 0   indent
  7:2   error  Newline required at end of file but not found  eol-last
  7:2   error  Missing semicolon                              semi

✖ 8 problems (8 errors, 0 warnings)
  7 errors and 0 warnings potentially fixable with the `--fix` option.

Para que eslint haga las correcciones pertienes sobre los archivos debemos cambiar el comando --fix-dry-run por --fix:

npx eslint main.js --fix

Nuestro archivo quedará así:

window.onload = function() {
  document.querySelector('body').innerHTML = '<h1>Hello World!</h1>';
};

const upper =function( text) {
  return text.toUpperCase();
};

Aún con esto si observas la salida del comando todavía queda un error.

/path/dariorivera/www/test/foo.js
  5:7  error  'upper' is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

Lo cual es muy lógico ya que esa variable no se utiliza.

En este artículo aprendiste qué es ESLINT y cómo utilizarlo mediante comandos en tu proyecto. Sin embargo ESLINT puede utilizarse también integrado con Webpack de una manera mucho más estándar. Te invito a revisar los siguientes enlaces para llevar esto a cabo. Hasta la próxima!

- Integrar ESLINT con Webpack
- Integrar ESLINT con Vue.js

Instalación

Configuración

Uso

Categorías