Linter (ESLint 10)

Para este proyecto Vite vamos a separar claramente dos herramientas que utilizaremos durante el desarrollo:

• ESLint → encuentra errores y malas prácticas en JavaScript.
• Prettier → formatea el código.

En este apartado nos centraremos únicamente en ESLint 10.

ESLint 10 utiliza el sistema moderno Flat Config, mediante el archivo:

1eslint.config.js

Los antiguos archivos .eslintrc.* ya no se utilizan.

1. Comprobar Node.js #

Desde la raíz del proyecto:

1node -v

ESLint 10 requiere una versión moderna de Node.js.

Por ejemplo:

1v22.18.0

sería válida.

2. Instalar ESLint 10 #

En la carpeta donde se encuentra package.json ejecutamos:

1npm install --save-dev eslint@10 @eslint/js globals

Estamos instalando tres paquetes:

1eslint       → el programa ESLint
2@eslint/js   → reglas oficiales recomendadas para JavaScript
3globals      → variables globales del navegador

globals es importante porque nuestra aplicación se ejecuta en el navegador y estamos utilizando elementos como:

1document.getElementById(...)

Podemos comprobar la versión instalada:

1npx eslint -v

Deberíamos obtener algo parecido a:

1v10.x.x

3. Crear eslint.config.js #

En la raíz del proyecto, al mismo nivel que package.json, creamos:

1eslint.config.js

La estructura será:

1mi-proyecto/
2├── node_modules/
3├── src/
4│   └── main.js
5├── index.html
6├── eslint.config.js
7├── package.json
8└── package-lock.json

Dentro de eslint.config.js escribimos:

1import js from "@eslint/js"
2import globals from "globals"
3
4export default [
5  {
6    files: ["src/**/*.js"],
7
8    languageOptions: {
9      ecmaVersion: "latest",
10      sourceType: "module",
11      globals: globals.browser,
12    },
13
14    rules: {
15      ...js.configs.recommended.rules,
16    },
17  },
18]

4. ¿Qué significa esta configuración? #

Vamos a analizarla por partes.

Importamos las reglas oficiales #

1import js from "@eslint/js"

Nos permite utilizar las reglas recomendadas oficialmente por ESLint.

Por ejemplo, ESLint podrá detectar:

• variables no utilizadas;
• variables inexistentes;
• errores frecuentes;
• determinadas malas prácticas.

Indicamos qué queremos analizar #

1files: ["src/**/*.js"]

Significa:

Analiza todos los archivos .js que estén dentro de src y sus subcarpetas.

En nuestro proyecto:

1src/
2└── main.js

por lo que analizará:

1src/main.js

Indicamos que utilizamos JavaScript moderno #

1ecmaVersion: "latest"

Permitimos utilizar sintaxis JavaScript moderna.

Indicamos que usamos módulos #

1sourceType: "module"

Esto es necesario porque estamos utilizando:

1import dayjs from "dayjs"

Nuestro HTML también carga el JavaScript como un módulo:

1<script type="module" src="/src/main.js"></script>

Indicamos que el código se ejecuta en el navegador #

1globals: globals.browser

Esto hace que ESLint conozca variables propias del navegador como:

1document
2window
3console
4localStorage
5navigator

Sin esta configuración podría aparecer, por ejemplo:

1'document' is not defined

aunque document sea perfectamente válido dentro de una aplicación web.

Activamos las reglas recomendadas #

1rules: {
2  ...js.configs.recommended.rules,
3}

Esto activa el conjunto de reglas recomendadas por ESLint para detectar problemas habituales.

5. Ejecutar ESLint por primera vez #

Ejecutamos:

1npx eslint src

ESLint recorrerá los archivos JavaScript de src.

Nuestro código actual es:

1import dayjs from "dayjs"
2
3const boton = document.getElementById("añadir")
4const input = document.getElementById("texto")
5const lista = document.getElementById("lista")
6
7boton.addEventListener("click", guardarPlan)
8
9function guardarPlan() {
10  const fechaHoy = dayjs().format("DD/MM/YYYY HH:mm")
11  const li = document.createElement("li")
12
13  li.textContent = input.value + " - " + fechaHoy
14
15  lista.appendChild(li)
16  input.value = ""
17}

Si ESLint no encuentra ningún problema, el comando no mostrará errores.

1Sin errores

6. Provocar un error para comprobar que funciona #

Vamos a crear deliberadamente un problema.

Añadimos en main.js:

1const prueba = 25

pero no utilizamos esta variable en ningún lugar.

Ejecutamos:

1npx eslint src

Aparecerá algo parecido a:

1'prueba' is assigned a value but never used  no-unused-vars

ESLint nos está diciendo:

Has declarado prueba, pero nunca la utilizas.

Eliminamos después:

1const prueba = 25

Podemos probar otro error:

1console.log(usuario)

Como usuario no ha sido declarado, ESLint detectará:

1'usuario' is not defined  no-undef

Esta es precisamente una de las principales utilidades de ESLint:

detectar problemas en el código antes de ejecutar la aplicación.

7. Añadir un script a package.json #

En lugar de escribir siempre:

1npx eslint src

podemos crear un comando npm.

En package.json, dentro de "scripts", añadimos:

1{
2  "scripts": {
3    "dev": "vite",
4    "build": "vite build",
5    "preview": "vite preview",
6    "lint": "eslint src"
7  }
8}

Ahora podemos ejecutar simplemente:

1npm run lint

y obtendremos el mismo resultado.

ESLint en tiempo real con VS Code #

Hasta ahora tenemos que ejecutar manualmente:

1npm run lint

cada vez que queremos comprobar el código.

Sin embargo, podemos integrar ESLint directamente en Visual Studio Code para que los errores aparezcan mientras estamos programando.

8. Instalar la extensión ESLint de VS Code #

Abrimos el panel de extensiones de Visual Studio Code:

1Ctrl + Shift + X

En macOS:

1⌘ + Shift + X

Buscamos:

1ESLint

e instalamos la extensión:

1ESLint
2Microsoft

Su identificador es:

1dbaeumer.vscode-eslint

La extensión de VS Code utilizará el ESLint que ya tenemos instalado dentro del proyecto:

1node_modules/
2└── eslint/

Por tanto, no necesitamos instalar ESLint globalmente.

9. Configurar ESLint para trabajar en tiempo real #

Dentro del proyecto creamos una carpeta:

1.vscode

y dentro de ella:

1settings.json

La estructura será:

1mi-proyecto/
2├── .vscode/
3│   └── settings.json
4├── node_modules/
5├── src/
6│   └── main.js
7├── eslint.config.js
8├── index.html
9├── package.json
10└── package-lock.json

En:

1.vscode/settings.json

escribimos:

1{
2  "eslint.enable": true,
3  "eslint.run": "onType",
4  "eslint.validate": ["javascript"]
5}

10. ¿Qué significa esta configuración? #

Activamos ESLint #

1"eslint.enable": true

Indica que ESLint debe estar activo en este proyecto.

Analizar mientras escribimos #

1"eslint.run": "onType"

Esta es la opción que permite que ESLint analice el código mientras escribimos.

No tenemos que guardar el archivo ni ejecutar:

1npm run lint

para ver determinados problemas.

VS Code los marcará directamente en el editor.

Analizar JavaScript #

1"eslint.validate": ["javascript"]

Indicamos que queremos que ESLint valide archivos JavaScript.

Nuestro:

1src/main.js

será analizado automáticamente.

11. Comprobar que ESLint funciona en tiempo real #

Abrimos:

1src/main.js

y escribimos:

1const prueba = 25

Sin ejecutar ningún comando, VS Code debería marcar prueba.

Al colocar el ratón encima aparecerá algo parecido a:

1'prueba' is assigned a value but never used.
2eslint(no-unused-vars)

Es decir, ESLint está funcionando mientras programamos.

Podemos probar también:

1console.log(usuario)

VS Code debería mostrar:

1'usuario' is not defined.
2eslint(no-undef)

Ya no necesitamos ejecutar constantemente:

1npm run lint

para detectar este tipo de problemas.

12. Panel de problemas de VS Code #

Podemos ver todos los problemas detectados desde:

1Ver
2→ Problemas

o utilizando:

1Ctrl + Shift + M

En macOS:

1⌘ + Shift + M

Por ejemplo:

1PROBLEMAS
2
3src/main.js
4
5'prueba' is assigned a value but never used.
6no-unused-vars
7
8'usuario' is not defined.
9no-undef

Esto resulta especialmente útil cuando un proyecto empieza a tener varios archivos.

13. Recomendar automáticamente la extensión #

También podemos indicar que este proyecto recomienda utilizar la extensión ESLint.

Creamos:

1.vscode/extensions.json

con:

1{
2  "recommendations": [
3    "dbaeumer.vscode-eslint"
4  ]
5}

La estructura queda:

1mi-proyecto/
2├── .vscode/
3│   ├── extensions.json
4│   └── settings.json
5├── node_modules/
6├── src/
7│   └── main.js
8├── eslint.config.js
9├── index.html
10├── package.json
11└── package-lock.json

Cuando otra persona abra el proyecto con VS Code podrá recibir la recomendación de instalar ESLint.

Esto es especialmente útil cuando compartimos el proyecto mediante Git.

14. ESLint 10 y Flat Config #

Nuestro proyecto utiliza:

1eslint.config.js

Como estamos utilizando ESLint 10, no necesitamos añadir opciones antiguas como:

1"eslint.experimental.useFlatConfig": true

ni:

1"eslint.useFlatConfig": true

ESLint 10 utiliza Flat Config de forma predeterminada.

Por tanto, nuestro settings.json puede mantenerse sencillo:

1{
2  "eslint.enable": true,
3  "eslint.run": "onType",
4  "eslint.validate": ["javascript"]
5}

15. Ejecutar ESLint manualmente sigue siendo útil #

Aunque ahora VS Code nos muestre los errores mientras programamos, seguimos manteniendo:

1npm run lint

¿Por qué?

Porque son dos usos diferentes.

Durante el desarrollo #

VS Code:

1Escribimos código
2      ↓
3Extensión ESLint
4      ↓
5Analiza main.js
6      ↓
7Marca errores inmediatamente

Antes de entregar o publicar #

Ejecutamos:

1npm run lint

para analizar el proyecto desde la terminal.

Esto será especialmente importante más adelante cuando configuremos integración continua (CI/CD).

16. Nuestro proyecto queda así #

1mi-proyecto/
2├── .vscode/
3│   ├── extensions.json
4│   └── settings.json
5│
6├── node_modules/
7│
8├── src/
9│   └── main.js
10│
11├── eslint.config.js
12├── index.html
13├── package.json
14└── package-lock.json

Nuestro eslint.config.js:

1import js from "@eslint/js"
2import globals from "globals"
3
4export default [
5  {
6    files: ["src/**/*.js"],
7
8    languageOptions: {
9      ecmaVersion: "latest",
10      sourceType: "module",
11      globals: globals.browser,
12    },
13
14    rules: {
15      ...js.configs.recommended.rules,
16    },
17  },
18]

Nuestro .vscode/settings.json:

1{
2  "eslint.enable": true,
3  "eslint.run": "onType",
4  "eslint.validate": ["javascript"]
5}

Nuestro .vscode/extensions.json:

1{
2  "recommendations": [
3    "dbaeumer.vscode-eslint"
4  ]
5}

Y en package.json disponemos de:

1{
2  "scripts": {
3    "dev": "vite",
4    "build": "vite build",
5    "preview": "vite preview",
6    "lint": "eslint src"
7  }
8}

Para iniciar nuestra aplicación:

1npm run dev

Para analizar todo el JavaScript:

1npm run lint

Y mientras escribimos en VS Code:

1                VS CODE
2                   │
3                   ▼
4           Extensión ESLint
5                   │
6             eslint onType
7                   │
8                   ▼
9              main.js
10                   │
11        ┌──────────┴───────────┐
12        │                      │
13        ▼                      ▼
14 variables sin usar     variables inexistentes
15        │                      │
16        └──────────┬───────────┘
17                   │
18                   ▼
19          error en el editor

¿Qué hemos conseguido? #

Ahora ESLint trabaja de dos formas:

1ESLint desde terminal
2        │
3        └── npm run lint
4
5ESLint desde VS Code
6        │
7        └── análisis en tiempo real

Podemos detectar problemas como:

1✓ variables no utilizadas
2✓ variables inexistentes
3✓ errores frecuentes
4✓ determinadas malas prácticas

antes incluso de ejecutar la aplicación.

Una cosa importante: todavía no vamos a obligar a poner comillas simples, punto y coma, espacios, indentación, etc.

Ese trabajo corresponde principalmente a Prettier, que será el siguiente paso.

Así podemos mantener muy clara la responsabilidad de cada herramienta:

1ESLint
2│
3└── ¿Hay algún problema en el código?
4
5Prettier
6│
7└── ¿Cómo debe estar formateado el código?