Calidad y empaquetado

Herramientas que cuidan tu código

A medida que un proyecto crece, escribir código "a mano" no basta: necesitas herramientas que detecten errores, unifiquen el estilo y preparen el código para producción. Veamos las tres familias principales.

Linters: ESLint

Un linter analiza tu código sin ejecutarlo y avisa de problemas: variables sin usar, comparaciones peligrosas (== en vez de ===), errores potenciales y violaciones de las reglas de estilo del equipo. El más usado en JavaScript es ESLint.

npm install --save-dev eslint
npx eslint src/        # analiza la carpeta src
npx eslint src/ --fix  # corrige automáticamente lo que pueda

El linter detecta cosas como esto antes de que rompan en producción:

let total = 5;      // 'total' nunca se usa  -> aviso del linter
if (x = 3) { ... }  // ¿asignación en vez de comparación?  -> aviso

Formatters: Prettier

Un formatter se ocupa solo del aspecto del código: indentación, comillas, comas finales, longitud de línea... No busca errores; reescribe el código con un formato consistente. El estándar es Prettier.

npm install --save-dev prettier
npx prettier --write .   # reformatea todos los archivos

La diferencia clave: ESLint se ocupa de la calidad (posibles bugs), Prettier del formato (estética). Se usan juntos y eliminan discusiones sobre estilo en los equipos.

Bundlers: Vite, esbuild, webpack

Tu código fuente está repartido en muchos módulos (import/export) y quizá usa sintaxis moderna que algunos navegadores no entienden. Un bundler (empaquetador) toma todos esos archivos y:

• los combina en pocos archivos optimizados,
• minimiza el resultado (quita espacios y nombres largos para que pese menos),
• transforma sintaxis moderna a otra compatible,
• gestiona imágenes, CSS y otros recursos.

Por eso se empaqueta para producción: el navegador descarga menos archivos y más pequeños, así la web carga más rápido. Las herramientas más usadas son Vite y esbuild (modernas y muy rápidas) y webpack (el clásico).

npm run build   # normalmente lanza el bundler y genera la carpeta dist/

Scripts de npm: el pegamento

Todas estas herramientas se orquestan con los scripts de package.json. En lugar de recordar comandos largos, los nombras:

{
  "scripts": {
    "lint": "eslint src/",
    "format": "prettier --write .",
    "build": "vite build",
    "test": "vitest"
  }
}

Y los ejecutas con npm run lint, npm run build, etc. Así cualquier persona del equipo usa exactamente el mismo flujo con un comando corto y memorable.