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

Author
By Darío Rivera
Posted on 2020-10-17 in 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 instalar un preset y en este tutorial utilizaremos Standard JS. Puedes revisar el conjunto de reglas aplicadas por Standard JS en aquí.

npm install standard --save-dev

Para configurar ESLINT basta agregar un archivo llamado .eslintrc en la carpeta raíz de tu proyecto con el siguiente contenido:

{
  "extends": "standard"
}

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:

/home/user/www/eslint-project/main.js
  5:7  error  'upper' is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

Sin embargo, aún no estamos utilizando las funcionalidades de Standard JS. Para esto debemos utilizar el siguiente comando:

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

Obtendremos una salida como la siguiente:

standard: Use JavaScript Standard Style (https://standardjs.com)
standard: Run `standard --fix` to automatically fix some problems.
  /path/main.js:1:25: Missing space before function parentheses.
  /path/main.js:2:1: Expected indentation of 2 spaces but found 3.
  /path/main.js:2:27: Strings must use singlequote.
  /path/main.js:5:7: 'upper' is assigned a value but never used.
  /path/main.js:5:13: Operator '=' must be spaced.
  /path/main.js:5:22: Missing space before function parentheses.
  /path/main.js:5:23: There should be no space after this paren.
  /path/main.js:6:1: Expected indentation of 2 spaces but found 0.
  /path/main.js:6:26: Extra semicolon.

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

npx standard 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()
}

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


Si te ha gustado este artículo puedes invitarme a tomar una taza de café

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.