ESLint

ESLint es un linter, esto quiere decir que examinará nuestro código y nos permitirá corregir errores de sintaxis, código mal escrito o incluso malas prácticas. Su uso nos permitirá corregir los puntos comentados anteriormente y si a esto le sumamos la posibilidad de establecer nuestras propias reglas o reglas de la empresa hara que todo nuestro equipo trabaje de la misma forma.

Instalación

Instalamos ESLint:

npm i eslint -D

Configuración:

Una vez instalado podemos generar nuestro archivo de configuración:

npx eslint --init

Nos aparecerá un pequeño asistente donde podremos elegir varias opciones, vamos a explicarlas un poco:

How would you like to use ESLint?

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

• To check syntax only: Comprueba únicamente la sintaxis del código.
• To check syntax and find problems: Comprueba los errores de sintaxis y además encuentra problemas en nuestro código.
• To check syntax, find problems, and enforce code style: Ésta es la opción recomendada. Realiza las dos acciones anteriores y además ayuda a corregir malas prácticas.

What type of modules does your project use?
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these

Con esta opción debemos seleccionar de que forma importamos nuestro código de Javascript, dependerá de si utilizamos import/export o require/exports.

Which framework does your project use?
> React
Vue.js
None of these

Elegimos si utilizamos un Framework de JS como React, Vue u otro.

Does your project use TypeScript?
  No
> Yes

¿Usas Typescript?, elige si o no.

Where does your code run?
> Browser
> Node

Podremos seleccionar varias opciones a la vez. Será donde se ejecutará nuestro código para que ESLint lo tenga en cuenta:

• Browser: Si nuestro código está centrado en navegadores sin utilizar NodeJS.
• Node: Si nuestro código está centrado en NodeJS

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)

Definiremos que tipo de reglas vamos a utilizar: una popular o una propia.

• Use a popular style guide: Utiliza una guía de normas popular, como puede ser la de: Airbnb, StandardJS, Google, etc...
• Answer questions about your style: Nos hará una serie de preguntas sobre que reglas utilizar en nuestro proyecto.
• Inspect your JavaScript file(s): Toma una decisión sobre las reglas a usar basandose en nuestro código.

What format do you want your config file to be in?
> Javascript
  YAML
  JSON

Nos pregunta como queremos guardar nuestro archivo de configuración. Lo más popular es utilizar .jso .json.

Would you like to install them now with npm?
No
> Yes

Si respondemos que sí se ejecutará el comando npm install de forma automática, si utilizamos yarn es mejor responder que no.

Reglas:

En la raíz de nuestro proyecto tendremos un fichero llamado .eslint.js|json, que contendrá lo siguiente:

{
"env": {
    "es2021": true,
    "browser": true
  },
  "extends": ["eslint:recommended", "standard"],
  "parserOptions": {
      "ecmaVersion": 12,
      "sourceType": "module"
  },
  "rules": {}
}

En el objeto de rules, podemos añadir nuestras propias reglas como pueden ser:

"indent": ["error", 2], // Identación de dos espacios
"quotes": ["error", "single"], // Uso de comillas simples
"semi": ["error", "always"], //Poner siempre ; donde sea necesario
"arrow-parens": ["error", "always"] // Añadir siempre los parentesis en las arrow function**

IDE:

Dependiendo del IDE que estemos utilizando debemos descargar el plugin de ESLint para una mejor sinergia. En mi caso utilizo Visual Studio Code:

1. Vamos a la pestaña de extensiones (Ctrl + Shift + X).
2. Buscamos ESLint y lo instalamos.

Como ejecutar ESLint:

Al guardar:

Tenemos la posibilidad de que ESLint se ejecute al guardar el fichero que estemos guardando.

"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},

Desde la terminal:

Ejecutarlo directamente desde nuestra terminal:

npx eslint src/js/index.js

Aunque esto pueda parecer que no tiene sentido ya que podemos hacerlo de forma automática al guardar, ESLint se puede ejecutar con herramientas como Husky o Lint-staged comprobar que todo nuestro código es correcto antes de subir nuestro código a nuestro repositorio.

ESLint dispone de muchas configuraciones, en el ejemplo del archivo de configuración hemos visto como utilizabamos standard y las oficiales de ESLint.

ESLint y Prettier:

Si además de ESLint utilizamos Prettier debemos tener en cuenta que pueden haber reglas que se contradigan entre sí... tenemos que configurar ambas herramientas para que trabajen con una buena sinergia.

Enlaces:

• Web oficial
• Reglas