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 en cuenta que un linter no busca errores que hacen que nuestro código no funcione (aunque puede facilitar encontrarlos). Un programa puede ser perfectamente válido y funcionar correctamente, y 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 otros.

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

Para utilizar ESLint necesitaremos tener instalado Node 6.14+ y NPM 3+. Para instalarlo 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. Al escribir eslint probablemente no nos encuentre el archivo ejecutable. Esto ocurre porque se encuentra en la carpeta node_modules/.bin, por lo usaremos 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 por defecto se instalan localmente.

Configuración 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 como queremos utilizarlo:

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

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 obviar esta opción y create tu propio conjunto de reglas, aunque 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.

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
Which version of ECMAScript do you use?
En esta opción podemos indicar en que versión de ECMAScript estará escrito nuestro código. Actualmente, la mayoría de navegadores soportan ES5 (opción por defecto), aunque cada vez es más común escribir código Javascript ES2015 (ES6). Equivale a la regla parserOptions.ecmaVersion.
Are you using ES6 modules?
En esta opción debemos indicar si estamos utilizando módulos ES6, es decir, si utilizamos import y export en nuestro código Javascript.
Where will your code run?
Nos pregunta si nuestro código está destinado a navegador (client-side) o a Node (server-side). Equivale a env.browser y/o env.node.
Do you use CommonJS?
Esta opción nos pregunta si estamos utilizando require en nuestro código, algo habitual si trabajamos con Node. Equivale a la regla env.commonjs.
Do you use JSX?
Esta opción nos pregunta si estamos escribiendo código utilizando JSX, algo habitual si trabajamos con React. Equivale a la regla parserOptions.ecmaFeatures.jsx.
Do you use React?
En esta opción nos pregunta si utilizamos la librería React en nuestro proyecto para precargar las reglas asociadas a esta famosa librería.
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.

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/ */
    "extends": "eslint:recommended",
    /* Opciones de parseo:
       https://eslint.org/docs/user-guide/configuring#specifying-parser-options */
    "parserOptions": {
        "ecmaVersion": 2015,     /* 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 Windows: https://eslint.org/docs/rules/linebreak-style */
        "linebreak-style": [
          "error",
          "windows"
        ],
        /* 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.

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.