⚡ Vite+ — Toolchain Unificado para la Web (vp)

Un solo comando para todo el ciclo de vida

Vite+ es el Unified Toolchain for the Web de VoidZero (la empresa de Evan You, creador de Vue y Vite). Donde antes había que configurar por separado Prettier, ESLint, TypeScript y Vitest, ahora hay un solo binario vp que cubre creación de proyectos, dev server, lint, formato, type-check, tests, build y despliegue.

• 🌐 Web: vite.plus
• 🏢 Empresa: VoidZero (adquirida por Cloudflare)
• ☁️ Plataforma: void.cloud
• 🎥 Fuente: video de Fazt — URL por confirmar

---

1️⃣ Qué es Vite+

Históricamente Vite era una build tool / dev server. Para un proyecto profesional había que sumar:

• Formateador (Prettier)
• Linter (ESLint)
• Type checker de TypeScript
• Test runner (Vitest)

Vite+ unifica todo bajo vp:

Área	Qué incluye
Proyectos	Monorepos, apps y librerías.
Desarrollo	Dev server ultrarrápido con HMR.
Calidad	Linter y formateador en Rust de alto rendimiento.
Tipos	Type-checker de TypeScript.
Testing	Runner de tests unitarios (Vitest).
Producción	Build y empaquetado.
Agentes IA	Integración nativa para generar contexto y reglas.

---

2️⃣ El ecosistema: Vitest, OXC y VoidZero

Vite+ no nace de cero; integra piezas del ecosistema:

Vite

Servidor y empaquetador base, con módulos ESM nativos.

Vitest

Framework de testing nativo para Vite. Reemplazo directo de Jest, mucho más rápido.

OXC — The JavaScript Oxidation Compiler

Conjunto de herramientas escritas en Rust, extremadamente rápidas:

Herramienta	Función	Comparación
Oxlint	Linter	50–100× más rápido que ESLint
Oxfmt	Formateador	Hasta 30× más rápido que Prettier
Parsers / Transformers / Resolvers	Minificación, transpilación, resolución de módulos	Milisegundos

Cloudflare, VoidZero y VOID

• Cloudflare adquirió VoidZero.
• Además del toolchain local existe VOID (void.cloud), una plataforma en la nube para desplegar a Cloudflare con un comando:

void deploy

La jugada estratégica

Vite+ unifica el desarrollo local y VOID el despliegue global. Cloudflare se queda con la cadena completa: build, runtime y edge.

---

3️⃣ Instalación

Se instala globalmente en el sistema operativo.

Windows (PowerShell)

irm https://vite.plus/ps1 | iex

macOS / Linux

curl -fsSL https://vite.plus | bash

Durante la instalación pregunta si quieres que Vite+ gestione:

• Versiones de Node.js
• Gestores de paquetes: pnpm, npm, yarn, bun

Aceptar la gestión de versiones

Es recomendable aceptarlo: Vite+ detecta y usa automáticamente el gestor configurado en cada proyecto, sin cambiarlo a mano.

curl | bash / irm | iex

Ambos ejecutan código remoto. Si te importa la cadena de suministro, descarga el script, revísalo y ejecútalo localmente.

---

4️⃣ Crear un proyecto con vp create

vp create

Abre un asistente interactivo con estas decisiones:

1. Tipo de proyecto
   • Monorepo
   • Vite+ Application (app web estándar)
   • Vite+ Library (para empaquetar librerías)
2. Gestor de paquetes — recomienda pnpm por defecto.
3. Soporte para agentes de IA — genera archivos de contexto:
   • AGENTS.md (compatible con Claude Code, Codex, Amp, OpenCode, etc.)
   • GEMINI.md
   • .github/copilot-instructions.md (GitHub Copilot)
   • Reglas para Cursor (.cursor/rules/...)
4. Configuración del editor — ajusta extensiones y reglas para VS Code, Zed o JetBrains.
5. Git y hooks — configura pre-commit para formatear, pasar lint y validar tipos antes de cada commit.

Plantillas y frameworks

vp create --list     # listar plantillas disponibles
vp create vite       # proyecto clásico de Vite eligiendo framework

Frameworks disponibles: React, Vue, Svelte, Preact, Lit, Vanilla.

Si eliges React, puedes escoger:

• TypeScript puro o TS + React Compiler
• JavaScript o JS + React Compiler
• React Server Components (RSC)
• React Router v7, TanStack Router, etc.
• Linter: Oxlint o ESLint clásico

---

5️⃣ Comandos principales

En lugar de recordar scripts distintos en cada package.json, Vite+ estandariza:

Comando	Función
vp dev	Dev server local con recarga rápida (HMR).
vp run	Menú interactivo con todas las tareas disponibles (build, dev, lint, etc.).
vp lint	Linter ultrarrápido (Oxlint).
vp fmt	Formatea el código (Oxfmt).
vp check	Ejecuta en paralelo formateador, linter y type-check de TypeScript.
vp test	Tests unitarios con Vitest.
vp build	Compila y empaqueta para producción.
vp install <pkg>	Instala dependencias respetando el package manager del proyecto. Ej.: vp install dayjs.

Flujo típico

vp create
cd mi-app
vp install dayjs
vp dev
vp check
vp build

---

6️⃣ Migrar un proyecto existente

Requisitos recomendados: Vite 8+ y ESLint configurado.

vp migrate

El comando:

1. Analiza package.json, tsconfig.json y eslint.config.js.
2. Pregunta si quieres:
   • Migrar reglas de ESLint → Oxlint
   • Actualizar tsconfig.json
   • Añadir archivos para agentes (AGENTS.md) y extensiones del editor
3. Reescribe vite.config.ts inyectando la configuración de lazy plugins de linting y formateo.
4. Limpia configuraciones redundantes (Prettier/ESLint sueltos si ya no se usan).
5. Al correr vp dev, el proyecto sigue funcionando igual, pero con las herramientas integradas.

Migración no destructiva, pero revisa el diff

Aunque el flujo es automático, conviene commitear antes de migrar y revisar los cambios en vite.config.ts y en las reglas de lint. La paridad de plugins de ESLint no es total.

---

7️⃣ Conclusión del autor

¿Vale la pena?

Sí, sobre todo para aplicaciones web cliente o SPA (React, Vue, Svelte, etc.):

• Elimina la fatiga de configurar múltiples herramientas pesadas de Node.js.
• Las reemplaza por herramientas nativas en Rust.
• Todo queda integrado en un solo comando.

¿Cuándo no usarlo?

Si trabajas con un framework full-stack con renderizado en servidor como Next.js, no tiene sentido cambiar: Next.js tiene su propia arquitectura y compilador.

---

⚠️ Notas prácticas

• Toolchain joven: al ser un ecosistema nuevo, conviene fijar versiones y probar en una rama antes de migrar producción.
• Oxlint ≠ ESLint: la velocidad es enorme, pero no todos los plugins/reglas tienen paridad. El asistente permite conservar ESLint.
• Gestión global de Node/package managers: cómoda, pero cambia cómo se resuelven versiones en tu máquina. Entender el impacto antes de aceptar.
• Cloudflare/VOID: el despliegue con void deploy es conveniente, pero suma dependencia de la plataforma. No es obligatorio para usar Vite+ local.
• Hooks de pre-commit: útiles, pero pueden ralentizar commits en monorepos grandes. Medir.
• Editores: la configuración automática cubre VS Code, Zed y JetBrains; revisar que no pise ajustes personales.

---

🔗 Enlaces relacionados

• 🚀 Dokploy — alternativa self-hosted para desplegar la app.
• Git · Github — flujo de repositorio y hooks.
• 🔍 Open Code Review — review automatizado en el pipeline.
• 🧠 El Software No Ha Muerto — contexto del developer como supervisor de agentes.
• 📊 CodeGraph — contexto de repositorio para agentes.
• 📥 Vault Ingest — cómo se guardó esta nota.