ESLint para Drupal: Instalación y uso en VSCode

Por medio de ESLint nos aseguraremos que nuestro código cumple con las especificaciones marcadas por Drupal. Sería el equivalente para javascript de phpcs (Usar la guía de estilo de Drupal con phpcs y vscode).

Veamos los pasos que necesitamos seguir para su correcto funcionamiento en nuestro Visual Studio Code.

Requerimientos previos.

Para poder ejecutar ESLint deberemos tener instalado en nuestro máquina el node.js con npm (gestor de paquetes para trabajar con proyectos de node.js).

Instalación de ESLint en VSCode.

El proceso de instalación de una extensión en VSCode no lo trataré en este artículo (creo que es muy sencillo como para explicarlo). Lo que nos interesa en este punto es que la extensión que usaremos la podemos encontrar en el market place del editor (extensión ESLint).

Generar package.json y descargar dependencias.

Ahora que tenemos instalada nuestra extensión, deberemos abrir el proyecto con el que vamos a trabajar y crear nuestro archivo package.json indicando la dependencia "eslint-config-drupal": "^5.0.2" 

La versión puede variar en el momento que estés leyendo este artículo. Puedes verificar la última versión en la web del proyecto: https://www.npmjs.com/package/eslint-config-drupal

Nuestro archivo package.json tendrá un aspecto similar a este:

{
  "name": "module_template",
  "version": "0.0.0",

  "description": "",
  "keywords": [
    "Drupal",
    "eslint"
  ],

  "license": "GNU",

  "author": {
    "name": "Óscar Novás",
    "email": "hola@oscarnovas.com",
    "url": "https://oscarnovas.com"
  },

  "scripts": {
    "lint": "eslint . --ext .js"
  },

  "devDependencies": {
    "eslint-config-drupal": "^5.0.2"
  }

}

Esta dependencia se encargará de instalar todo lo necesario para comenzar a usar eslint. Por lo que ahora ejecutaremos el siguiente comando para descargar estas dependencias (desde la raíz de nuestro proyecto, dónde se encuentra el package.json):

npm install

Configurar ESLint.

Una vez descargadas las dependencias, es el momento de configurar las reglas para Drupal.

Debemos crear un archivo llamado .eslintrc.json con el siguiente contenido:

{
  "extends": [
    "drupal"
  ],

  "rules": {
    "func-names": ["off"]
  }
}

En la sección "rules" podemos añadir aquellas reglas que queramos ignorar o modificar.

Si quieres ver las reglas que se están teniendo en cuenta, puedes buscar el archivo .eslintrc.json dentro de la carpeta core de la instalación de Drupal.

Ignorando archivos con .eslintignore

Al igual que sucede con git, podemos ignorar carpetas, extensiones, archivos concretos...

Su sintaxis es la misma que para git. Veamos un ejemplo para nuestros proyectos:

assets/vendor/**/*
node_modules/**/*

Configuración para VSCode.

El último paso que nos queda, es realizar la configuración en el archivo settings.json (el de usuario o el de cada proyecto, según gustes).

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

También puedes indicar true en el valor source.fixAll.eslint, en mi caso prefiero tener yo el control de lo que se cambia en cada caso, me basta con que me avise si tengo algún problema.

La explicación a esta configuración (y otras disponibles) la puedes encontrar en la web de la extensión: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Descarga de configuraciones

Estas configuraciones (y otras muchas que uso habitualmente en mi trabajo) las puedes descargar desde mi repositorio público en GitHub:

https://github.com/oscarnovasf/VSCode-settings