ESLint

Los linters son herramientas de programación que examinan el código del programador y lo ayudan a corregir errores de sintaxis, código incorrecto, malas prácticas o costumbres o incluso ayudarlo a seguir guías de estilo, favoreciendo escribir código de calidad y acostumbrando al usuario a solventar ciertos problemas comunes en fases tempranas (y no tan tempranas) como programador.

Hay que tener claro que un linter no sólo busca errores que hacen que nuestro código no funcione, sino que también nos ayuda a corregir malos hábitos. Un programa puede ser perfectamente válido y funcionar correctamente, y aún así, ESLint encontrar errores en él.

¿Qué es ESLint?

ESLint es un linter que examina código Javascript, siguiendo unas ciertas normas y criterios personalizables por el programador, para que el código Javascript siga ciertos estándares y estilos, favoreciendo la escritura de código de calidad. Existen otras herramientas similares como JSHint o JSLint, sin embargo, ESLint ofrece muchas características que lo hacen destacar sobre los anteriores.

ESLint es totalmente configurable y puedes indicarle que criterios (llamados reglas) quieres que utilice y cuales prefieres que ignore, adaptándose a las necesidades de cualquier empresa, programador o equipo de trabajo.

Instalación de ESLint

Aunque la herramienta ESLint requiere como mínimo Node 6.14+ y NPM 3+ para funcionar, es recomendable tener la última versión estable de Node / NPM instalada desde la web oficial, ya que otras versiones incluídas en los repositorios por defecto de Debian o Ubuntu no están completamente actualizadas y pueden carecer de funcionalidades como npx o similares. Para los ejemplos de esta página se utilizó un Node 10.15.3 con NPM 6.4.1.

Para instalar ESLint en nuestro proyecto haremos lo siguiente:

npm install --save-dev eslint

Este comando instalará ESLint en nuestro proyecto (localmente) y añadirá la referencia del paquete al fichero packages.json (que debe existir previamente). Al escribir eslint probablemente no nos encuentre el archivo ejecutable. Esto ocurre porque se encuentra en la carpeta node_modules/.bin, por lo que podemos utilizar npx para ejecutarlo sin tener que escribir la ruta.

Otra solución pasa por instalar ESLint como paquete global con npm install -g eslint. Sin embargo, esta opción puede presentar problemas más adelante, puesto que las configuraciones y otros paquetes también deberían instalarse de forma global, y estamos trabajando en un proyecto local.

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:

Pregunta del asistente / Descripción
How would you like to use ESLint?
Esta opción nos permite seleccionar el modo en el que funcionará el linter. To check syntax only nos revisa sólo la sintaxis de nuestro código, To check syntax and find problems además nos ayuda a encontrar potenciales problemas y To check syntax, find problems, and enforce code style además de lo anterior, nos ayuda a reforzar nuestro estilo de código. Se recomienda utilizar la última.
What type of modules does your project use?
Esta opción nos permite seleccionar la forma en la que importamos código Javascript. Si utilizamos import, seleccionamos JavaScript modules (import/export). Por otro lado, si estamos utilizando el sistema de node con require, seleccionaremos CommonJS (require/exports).
Which framework does your project use?
Esta opción nos da la posibilidad de indicar si usamos un framework 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.
Where does your code run?
Con esta opción enfocamos el linter para revisar código orientado a navegadores, marcando Browser, o código orientado a otros sistemas como Node. Ten en cuenta que puedes marcar ambas si así lo necesitas.
How would you like to define a style for your project?
Esta es una de las opciones más importantes, ya que con ella nutrimos al linter con la información necesaria para saber como corregir nuestro código. Las opciones disponibles son Use a popular style guide, Answer questions about your style o Inspect your JavaScript file(s), y las explicaremos en los siguientes apartados.
What format do you want your config file to be in?
Esta opción nos pregunta en que formato queremos guardar la configuración de ESLint. Tenemos a nuestra disposición un formato Javascript, otro YAML y otro JSON. Personalmente, suelo optar por el último, ya que suele ser el más extendido.
Would you like to install them now with npm?
Por último, y dependiendo de las opciones escogidas, nos puede aparecer un mensaje como este, que al responderlo de forma afirmativa, instalará automáticamente los paquetes de NPM necesarios.

En este modo, ESLint utilizará una guía de estilo predefinida, creada por otra empresa o grupo. Por defecto tenemos las 3 siguientes para elegir:

Promotores GitHub Nombre del paquete (NPM) Observaciones
Airbnb @airbnb/javascript eslint-config-airbnb
StandardJS @standard/standard eslint-config-standard
Google @google/eslint-config-google eslint-config-google

Cada una de ellas, tiene una serie de reglas preconfiguradas que luego, puedes modificar o cambiar si lo deseas. También puedes crear/modificar tu propio conjunto de reglas, aunque eso te llevará un poco más de tiempo.

Además de estos 3 paquetes del asistente, existen muchos otros como eslint-config-react-app, eslint-config-prettier, eslint-config-eslint, eslint-config-jest-enzyme y muchos otros que puedes buscar en NPM con un simple npm search eslint-config e instalar con un npm install seguido del nombre del paquete.

Ten en cuenta que aunque el asistente de ESLint instala y configura los paquetes necesarios automáticamente, si queremos hacerlo con una guía concreta no basta con hacer el npm install, sino que además hay que modificar el archivo de configuración, como se verá más adelante.

Answer questions about your style

En el caso de que no queramos utilizar un paquete de reglas preconfiguradas, ESLint permite crear uno desde cero mediante una serie de preguntas que nos realizará y determinarán de forma general el estilo que utilizamos:

Pregunta del asistente / Descripción
What style of indentation do you use?
Esta opción nos pregunta si queremos que el código esté indentado con tabuladores o con espacios. En el caso de los espacios, puedes indicar incluso cuantos espacios requieres. Equivale a la regla rules.indent.
What quotes do you use for strings?
Debemos indicar en esta opción si utilizamos comillas dobles o comillas simples para los String. Equivale a la regla rules.quotes.
What line endings do you use?
Esta opción nos permite indicar si escribimos código en Windows o en Unix (Linux). Equivale a la regla rules.linebreak-style.
Do you require semicolons?
Esta opción nos pregunta si queremos utilizar punto y coma al final de cada sentencia. Recuerda que en Javascript es opcional el uso de punto y coma. Equivale a la regla rules.semi.

Obviamente, estas no son sino las preguntas principales y más importantes para tener un fichero de configuración de reglas mínimo para comenzar. Puedes encontrar todas las reglas que tiene ESLint en esta página: reglas de ESLint.

Inspect your JavaScript file(s)

Por último, esta tercera opción se basará en una inspección de tus archivos Javascript para determinar cuál sería la guía de estilo que deberías utilizar, siguiendo las normas que se utilizan en los archivos Javascript actuales.

Formato de configuración

En cualquiera de las 3 opciones del asistente, se nos preguntará What format do you want your config file to be in?. Esta opción nos permite seleccionar que formato de configuración queremos utilizar en nuestro proyecto para utilizar con ESLint. Ten en cuenta que el asistente anterior lo que hace es generar un fichero de configuración con reglas de ESLint que luego podrás modificar, añadir y/o personalizar.

En principio, puedes utilizar el formato que más te guste. Si existen varios archivos de configuración, tendrá preferencia en el orden de la siguiente lista.

Las opciones disponibles son:

  • Javascript: Generará un archivo de configuración .eslintrc.js
  • YAML: Generará un archivo de configuración .eslintrc.yaml o .eslintrc.yml
  • JSON: Generará un archivo de configuración .eslintrc.json. Aunque en el formato JSON no se admiten comentarios, ESLint sí soporta comentarios de tipo /* */.

También es posible utilizar un objeto eslintConfig dentro del package.json de nuestro proyecto.

Antiguamente se utilizaba un fichero .eslintrc (YAML o JSON), pero está marcado como obsoleto, por lo que sería conveniente evitar utilizar ese nombre para el fichero de configuración.

Por último, comentar que también es posible crear un fichero .eslintignore donde podemos indicar archivos o globs (patrones de archivos, comodines, etc...) que se ignorarán a la hora de realizar una comprobación de ESLint. Se pueden añadir comentarios, con línea que comiencen por #.

Configuración de ejemplo

A continuación, tenemos un fichero de configuración de ejemplo de ESLint, con las opciones recomendadas y ciertas reglas personalizadas y comentadas:

{
    /* Entorno de desarrollo:
       https://eslint.org/docs/user-guide/configuring#specifying-environments */
    "env": {
        "browser": true,         /* El objetivo del código es ejecutar en navegadores */
        "es6": true              /* El código estará escrito en ES6 */
    },
    /* Activa las reglas marcadas con ✓ en la documentación oficial de ESLint:
       https://eslint.org/docs/rules/ y el paquete eslint-config-standard */
    "extends": ["eslint:recommended", "standard"],
    /* Opciones de parseo:
       https://eslint.org/docs/user-guide/configuring#specifying-parser-options */
    "parserOptions": {
        "ecmaVersion": 2018,     /* Establece la versión de ECMAScript que se usará */
        "sourceType": "module"   /* Indica si se usan módulos ES6 o solo scripts */
    },
    /* Reglas de ESLint personalizadas (sobreescriben a anteriores):
        https://eslint.org/docs/rules/ */
    "rules": {
        /* Indentación a 2 espacios: https://eslint.org/docs/rules/indent */
        "indent": [
          "error",
          2
        ],
        /* Finales de línea de UNIX: https://eslint.org/docs/rules/linebreak-style */
        "linebreak-style": [
          "error",
          "unix"
        ],
        /* Uso de comillas simples para strings: https://eslint.org/docs/rules/quotes */
        "quotes": [
          "error",
          "single"
        ],
        /* Uso de punto y coma obligatorio: https://eslint.org/docs/rules/semi */
        "semi": [
          "error",
          "always"
        ]
    }
}

Podemos guardar este fichero con nombre .eslintrc.json en la carpeta raíz de nuestro proyecto y escribir en una terminal el siguiente comando para que nos revise los errores de nuestro código (asumiendo que queremos revisar un archivo llamado index.js):

npx eslint src/js/index.js

También se pueden usar globs como *.js o similares.

Observa que en la opción extends del archivo de configuración se están utilizando dos fuentes de datos. Por un lado, las recomendaciones básicas oficiales de ESLint, y por otro lado, la guía de estilo eslint-config-standard. En el caso de querer seguir añadiendo más guías sólo necesitaríamos añadir el nombre del paquete, omitiendo el fragmento eslint-config-.

Plugins de ESLint

Aunque se pueden mostrar los errores por terminal, algo más cómodo y común es configurarlo en nuestro editor de código para que nos muestre las recomendaciones y errores a medida que vamos escribiendo nuestro programa. También puede ser interesante tenerlo configurado con algún automatizador como WebPack o Gulp y que nos aparezca cuando estemos trabajando con él.

A continuación tienes una lista de editores o automatizadores con algunas de las extensiones o plugins que puedes instalar para usar ESLint:

Editor o sistema Plugin o extensión
Visual Studio Code VSCode ESLint
Adobe Brackets Backets ESLint
IntelliJ IDEA ESLint Plugin
ATOM linter-eslint
Vim ALE o Syntastic
Sublime Text 3 SublimeLinter-eslint
Gulp gulp-eslint
Webpack eslint-loader
RollUp rollup-plugin-eslint
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.