Cómo hacer que ESLint 9.11.1 funcione en Vue 3

El pasado 23 de septiembre el equipo de ESLint liberó la nueva versión, la 9.11.1.

En la medida en la que vamos creciendo como desarrolladores y procuramos cuidar las buenas prácticas y, en mi caso, tratando de seguir las recomendaciones del Vue Core Team para desarrollar proyectos de Vue.js, vamos creando hábitos que nos llevan a hacer algunas cosas automáticamente.

Mi rutina al crear un nuevo proyecto de Vue es elegir la configuración que se puede ver en la siguiente imagen:

Una vez termino de crear el proyecto, accedo al directorio, ejecuto npm install, ejecuto ncu -u para actualizar todas las dependencias a sus últimas versiones, y vuelvo a ejecutar npm install.

Al día de hoy (27 de septiembre de 2024), cuando creas el scaffold de un nuevo proyecto en Vue, el archivo 'package.json' luce de la siguiente manera:

{
  "name": "new-vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "pinia": "^2.1.7",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^20.14.5",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "jsdom": "^24.1.0",
    "npm-run-all2": "^6.2.0",
    "prettier": "^3.2.5",
    "typescript": "~5.4.0",
    "vite": "^5.3.1",
    "vite-plugin-vue-devtools": "^7.3.1",
    "vitest": "^1.6.0",
    "vue-tsc": "^2.0.21"
  }
}

Si ejecutas 'npm-check-updates' (ncu, sin la bandera '-u') te entrega un reporte similar al siguiente:

Checking /home/drfcozapata/vue.js/new-vue-project/package.json
[====================] 22/22 100%

 @rushstack/eslint-patch     ^1.8.0  →  ^1.10.4
 @types/node               ^20.14.5  →  ^22.7.3
 @vitejs/plugin-vue          ^5.0.5  →   ^5.1.4
 eslint                     ^8.57.0  →  ^9.11.1
 eslint-plugin-vue          ^9.23.0  →  ^9.28.0
 jsdom                      ^24.1.0  →  ^25.0.1
 npm-run-all2                ^6.2.0  →   ^6.2.3
 pinia                       ^2.1.7  →   ^2.2.2
 prettier                    ^3.2.5  →   ^3.3.3
 typescript                  ~5.4.0  →   ~5.6.2
 vite                        ^5.3.1  →   ^5.4.8
 vite-plugin-vue-devtools    ^7.3.1  →   ^7.4.6
 vitest                      ^1.6.0  →   ^2.1.1
 vue                        ^3.4.29  →   ^3.5.9
 vue-router                  ^4.3.3  →   ^4.4.5
 vue-tsc                    ^2.0.21  →   ^2.1.6

Run ncu -u to upgrade package.json

Donde se ve claramente que puedes actualizar Vue.js de la versión 3.4.29 (por defecto aún) a la 3.5.9 (la última al momento de escribir este post) y puedes actualizar eslint de la versión 8.57.0 a la 9.11.1 (también la última al momento de escribir este post), entre otras actualizaciones posibles.

En esta oportunidad, como es mi costumbre, ejecuté ncu -u y esto actualizó todo de forma automática, no contando con la sorpresa de los cambios radicales que trae la nueva versión del potente ESLint.

Pero antes de entrar a ese punto, tenemos que dar respuesta a una pregunta importante...

¿Por qué deberías usar ESLint en tus proyectos de Vue.js?

ESLint es un linter, y un linter es una herramienta de "análisis estático" que se usa para identificar y señalar errores, problemas de estilo y posibles bugs en el código fuente, entre los cuales podemos mencionar:

1. Detección de errores: los linters pueden encontrar errores comunes en el código, como variables no utilizadas, errores de sintaxis y problemas de lógica, entre otros.
2. Estilar el código: los linters ayudan a mantener un estilo de codificación consistente al señalar desviaciones de las convenciones establecidas, como la indentación, el uso de comillas y/o punto y coma, el formato de funciones, etc.
3. Mejorar la calidad del código: los linters contribuyen a mejorar la calidad general del software y facilitan el mantenimiento al identificar problemas potenciales antes de que el código se ejecute.
4. Integrar los flujos de trabajo: a menudo los linters se integran en editores de código y sistemas de construcción, lo que permite recibir retroalimentación instantánea mientras se escribe el código.

¿Cuáles son esos cambios radicales que trae la nueva versión de ESLint?

La versión 9.0.0 de ESLint presenta algunos cambios radicales en relación a las versiones anteriores. Dos de los cambios más importantes que podemos mencionar son los siguientes:

Las versiones inferiores a la 18.18 y la 19 de Node.js no son soportadas por esta nueva versión.

La nueva versión de ESLint soporta las siguientes versiones de Node.js:

• Node.js v18.18.0 y superior
• Node.js v20.9.0 y superior
• Node.js v21 y superior

Por lo cual, debemos tener en cuenta la versión de Node que estamos ejecutando. Yo sigo recomendando el uso de la herramienta NVM (Node Version Manager) y la instalación posterior de Node a través de éste si trabajas con código legado y te ves en la necesidad de ejecutar alguna versión específica de Node, como es mi caso.

Nuevo formato de configuración por defecto

A partir de ESLint v9.0.0, 'eslint.config.js' es el nuevo formato de configuración predeterminado; el formato anterior (.eslintrc.js) ya no se utiliza y no se buscará automáticamente.

Y este era el punto que yo desconocía y que me tuvo un buen rato tratando de solucionar el problema, que no era ningún problema al final.

Adicionalmente, se incorporaron muchos otros cambios importantes:

• Se eliminaron varios formateadores que eran usados internamente por ESLint.
• Se eliminaron las reglas require-jsdoc y valid-jsdoc.
• Se habilitaron 4 nuevas reglas (no-constant-binary-expression, no-empty-static-block, no-new-native-nonconstructor y no-unused-private-class-members) y se eliminaron otras 4 (no-extra-semi, no-inner-declarations, no-mixed-spaces-and-tabs y no-new-symbol) en eslint:recommended.
• Cuando se usa la bandera --output-file se escribe el archivo en el disco, incluso si la salida está vacía.
• Se cambió la manera de escribir las reglas relacionadas con '/* exported */'.
• Se hicieron más estrictos los esquemas de algunas reglas.
• Y muchos otros cambios más.

Si recuerdas el archivo 'package.json que publiqué antes,éste contiene una línea con el siguiente código:

    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",

Pues, ¡sorpresa! A raíz de todos los cambios, esa línea ya no funciona si actualizas a la nueva versión.

De igual manera, el archivo '.eslintrc.cjs' que contiene el siguiente código ¡tampoco funciona!:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}

¿Qué hacer si deseas seguir usando ESLint en tus proyectos de Vue 3 con las últimas versiones de todas las dependencias?

La respuesta es sumamente sencilla, aunque tuve que leer bastante para llegar hasta ella:

1. Crea el nuevo proyecto usando npm create vue@latest
2. Accede al directorio del proyecto y ejecuta npm install
3. Ejecuta ncu -u para actualizar las dependencias
4. Vuelve a ejecutar npm install
5. Abre tu editor de código y elimina el archivo '.eslintrc.cjs'
6. Ejecuta el siguiente comando: npm init @eslint/config@latest. Este comando ejecuta un script que te permite crear la nueva configuración para ESLint y crear los nuevos archivos necesarios. En mi caso, yo selecciono:
   • ¿Cómo te gustaría usar ESLint? To check syntax and find problems,
   • ¿Qué tipo de módulos usa tu proyecto? CommonJS (require/exports),
   • ¿Qué tipo de framework usa tu proyecto? Vue.js,
   • ¿Tu proyecto usa TypeScript? Yes,
   • ¿Dónde se ejecuta tu código? Browser,
   • La configuración que has seleccionado requiere las siguientes dependencias: eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-vue. ¿Quieres instalarlas ahora? Yes,
   • ¿Cuál manejador de paquetes quieres usar? npm
7. Modifica la línea en el archivo 'package.json' de forma que quede así: "lint": "eslint . --fix".

Todo lo anterior condujo a crear el nuevo archivo 'eslint.config.js' con el siguiente código:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
];

A partir de aquí puedes ejecutar npm run lint con toda confianza, sin que te salten un montón de advertencias y errores en la consola.

Espero que la información anterior te sea útil y te evite perder el tiempo que yo perdí tratando de solucionar este breacking-change.

Mucho éxito y bendiciones desde Venezuela.