Primeros pasos con Vite+

Vite+ es una cadena de herramientas unificada para desarrolladores de VoidZero — la empresa fundada por Evan You, creador de Vite y Vue — que combina Vite, Vitest, Rolldown, Oxlint, Oxfmt, tsdown y Vite Task bajo un único CLI llamado vp. Fue anunciada como versión alpha el 13 de marzo de 2026; la etiqueta alpha se eliminó con la v0.1.21 el 13 de mayo de 2026, y la versión actual en el momento de redactar este artículo es la v0.1.23 (29 de mayo de 2026). El proyecto sigue siendo pre-1.0, por lo que debe tratarse como software en etapa temprana y no como una solución probada en producción — aunque ya no es alpha, y el flujo de trabajo principal para comenzar es lo suficientemente estable como para usarlo en proyectos reales.

Esta guía explica cómo instalar Vite+, crear la estructura de un proyecto, ejecutar el servidor de desarrollo, realizar comprobaciones y pruebas, generar una compilación de producción, y comprender cómo encaja vp en un flujo de trabajo frontend típico.

Qué es realmente Vite+

Vite+ es una distribución de CLI que agrupa un conjunto seleccionado de herramientas frontend bajo un único punto de entrada. Cada componente es un proyecto existente, no una nueva creación: Vite 8 como servidor de desarrollo, Rolldown como bundler de producción basado en Rust y compatible con la API de Rollup, Vitest como ejecutor de pruebas, Oxlint y Oxfmt como linter y formateador construidos sobre la infraestructura del compilador Oxc, tsdown para el bundling de bibliotecas, y Vite Task para la orquestación de tareas y el almacenamiento en caché en monorepos.

Las mejoras de rendimiento en estas herramientas son estructurales, no acumulativas: Rolldown, Oxlint y Oxfmt comparten Oxc — la infraestructura de compilador JavaScript basada en Rust de VoidZero — como capa común de análisis sintáctico y transformación. La mejora de velocidad proviene de que el motor subyacente es rápido por diseño, en lugar de que cada herramienta esté optimizada de forma independiente.

Vite+ complementa a Vite en lugar de reemplazarlo. Si ya utiliza Vite, puede adoptar Vite+ de forma incremental; si no lo usa, Vite+ no es el punto de entrada que necesita.

Requisitos previos

Antes de instalar, confirme que su entorno cumple los requisitos de ejecución de Vite 8. Vite 8 requiere Node.js 20.19 o posterior, o Node.js 22.12 o posterior — Vite+ no reemplaza a Node.js, sino que gestiona qué versión de Node.js utiliza su proyecto a través de vp env. Ejecutar Vite+ con una versión anterior de Node.js generará un error antes de que el servidor de desarrollo arranque.

También necesita un shell compatible con POSIX en macOS o Linux, o PowerShell en Windows.

Instalación de Vite+

Vite+ se instala como un único binario llamado vp. En macOS o Linux:

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

En Windows PowerShell:

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

Reinicie su terminal y luego verifique la instalación:

vp --version
vp help

Durante la instalación, Vite+ pregunta si debe gestionar su entorno de ejecución global de Node.js. Si ya utiliza nvm, fnm o asdf, puede rechazar el modo gestionado y Vite+ delegará en el Node.js de su sistema. Puede cambiar esto más adelante con vp env on o vp env off.

Creación de su primer proyecto

vp create genera la estructura de un nuevo proyecto a partir de una plantilla de Vite+, solicitando de forma interactiva el framework, el gestor de paquetes y si desea usar TypeScript o JavaScript:

vp create

El asistente interactivo le permite elegir una plantilla (Vite, Vue, Svelte, Nuxt, Next.js, React Router o TanStack Start), un gestor de paquetes (npm, pnpm, yarn, bun) y TypeScript o JavaScript. Para omitir el asistente, pase el nombre de una plantilla directamente:

vp create vue my-app
cd my-app
vp install

La estructura generada produce un único archivo vite.config.ts que contendrá la configuración de todas las herramientas de la cadena — el linter, el formateador, el ejecutor de pruebas y los hooks de archivos en stage leen todos desde este archivo.

Ejecución del servidor de desarrollo con vp dev

vp dev inicia el servidor de desarrollo de Vite 8 con la configuración predeterminada — no se requieren flags para el caso habitual:

vp dev

vp dev inicia el servidor de desarrollo de Vite 8 directamente. No ejecuta el script dev de su package.json — este es un punto de confusión habitual, y es el comportamiento inverso al de npm run dev. Si su proyecto tiene un script dev personalizado (por ejemplo, uno que ejecuta un proceso de backend de forma concurrente con el frontend), invóquelo explícitamente:

vp run dev

La misma regla se aplica a vp test y vp build: estos son comandos integrados que se enrutan a través de las herramientas integradas de Vite+. vp run <script> es la vía de escape para scripts arbitrarios de package.json, y también aprovecha el almacenamiento en caché con reconocimiento de entradas de Vite Task cuando se invoca con --cache.

El archivo unificado vite.config.ts

Vite+ consolida la configuración de todas las herramientas que envuelve — Vite, Vitest, Oxlint, Oxfmt y los hooks de archivos en stage — en un único archivo vite.config.ts en la raíz del proyecto. En lugar de mantener archivos separados como .eslintrc, .prettierrc y vitest.config.ts, todo se expresa mediante una única llamada tipada a defineConfig.

Una configuración mínima tiene este aspecto:

import { defineConfig } from 'vite-plus'

export default defineConfig({})

A continuación, puede añadir configuración para herramientas individuales a medida que su proyecto crece:

import { defineConfig } from 'vite-plus'

export default defineConfig({
  fmt: {
    singleQuote: true,
    semi: false,
  },
  lint: {
    ignorePatterns: ['dist/**'],
  },
  test: {
    include: ['src/**/*.test.ts'],
  },
})

Vite+ también admite comprobaciones de archivos en stage a través de un bloque de configuración staged:

import { defineConfig } from 'vite-plus'

export default defineConfig({
  fmt: { singleQuote: true, semi: false },
  lint: { ignorePatterns: ['dist/**'] },
  test: { include: ['src/**/*.test.ts'] },
  staged: {
    '*.{js,ts,tsx,vue,svelte}': 'vp check --fix',
  },
})

Para habilitar las comprobaciones en el momento del commit, instale los hooks de Git:

vp config

Tras esto, Vite+ ejecutará automáticamente las tareas configuradas para archivos en stage durante los commits a través de vp staged, sin necesidad de configuración separada de Husky o lint-staged.

Al igual que con el resto de Vite+, el sistema de configuración sigue evolucionando mientras el proyecto permanece en pre-1.0. Si adopta nuevas versiones, conviene revisar la documentación oficial y las notas de la versión para detectar cambios en la configuración antes de actualizar.

Ejecución de comprobaciones con vp check

vp check ejecuta en un solo paso el formateo, el linting y las comprobaciones con información de tipos sobre el proyecto actual:

vp check

Para corregir automáticamente lo que se pueda corregir de forma segura:

vp check --fix

--fix gestiona la mayor parte del formateo y muchas reglas de lint, pero no puede reparar errores de tipos ni bugs lógicos. Trátelo como un corrector automático, no como un sustituto de la revisión de código. Las comprobaciones de tipos las realiza tsgolint (un linter con información de tipos construido sobre la cadena de herramientas de TypeScript en Go), no una compilación completa con tsc --noEmit — es rápido para detectar errores de tipos comunes, pero no sustituye a tsc en CI si se requiere una compilación de tipos exhaustiva. Dado que Oxlint, Oxfmt y tsgolint comparten la infraestructura alineada con Oxc, vp check se ejecuta notablemente más rápido que una cadena comparable de ESLint + Prettier + tsc --noEmit sobre la misma base de código.

Ejecución de pruebas con vp test

vp test ejecuta la suite de Vitest una sola vez y termina — Vite+ invierte el comportamiento nativo predeterminado de Vitest de permanecer en modo watch, por lo que dicho comportamiento es opcional:

vp test                  # ejecutar una vez (Vite+ no usa watch por defecto, a diferencia de Vitest)
vp test watch            # entrar en modo watch
vp test run --coverage   # ejecución única con cobertura

vp test invoca Vitest utilizando el bloque test en vite.config.ts. Tenga en cuenta que esto invierte el comportamiento predeterminado nativo de Vitest — ejecutar vp test solo termina tras un único paso, mientras que vitest en modo independiente permanecería en modo watch. Dado que Vitest ya comparte el pipeline de transformación de Vite, no es necesario mantener un archivo vitest.config.ts separado — el mismo defineConfig cubre ambos.

Generación de una compilación de producción con vp build

vp build compila un bundle de producción usando Vite 8 y Rolldown, generando la salida en dist/ con las mismas convenciones que vite build:

vp build

vp build compila un bundle de producción usando Vite 8 y Rolldown. La salida va a dist/ siguiendo las mismas convenciones que vite build. Dado que Rolldown está diseñado para ser compatible con la API de Rollup, los plugins de Rollup existentes deberían seguir funcionando — aunque los autores de plugins aún están publicando correcciones para casos límite, por lo que verifique cualquier plugin personalizado en una rama antes de depender de vp build para sus releases.

Para almacenar en caché las entradas de compilación entre ejecuciones en un monorepo:

vp run --cache build

Vite Task genera una huella digital de las entradas declaradas y omite los paquetes cuyas entradas no han cambiado en ejecuciones posteriores. Este es el mismo problema de flujo de trabajo que aborda Turborepo, pero integrado en la cadena de herramientas en lugar de añadido encima de ella.

Un fallo habitual en producción al cambiar de bundler es la regresión silenciosa de los source maps. Antes de desplegar una salida de vp build, verifique que los stack traces en su herramienta de monitorización de errores o de reproducción de sesiones sigan resolviendo a los archivos fuente originales — este es uno de los problemas de migración de herramientas de compilación más frecuentes que OpenReplay detecta en datos de sesiones reales.

Referencia de comandos de vp

Referencia actualizada a Vite+ v0.1.23 (29 de mayo de 2026).

Integración de Vite+ en GitHub Actions

Para CI, VoidZero publica la acción voidzero-dev/setup-vp, que instala el CLI vp y opcionalmente almacena en caché las dependencias. Un flujo de trabajo mínimo:

name: CI
on: [push, pull_request]
jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: voidzero-dev/setup-vp@v1
        with:
          node-version: '22'
          cache: true
      - run: vp install
      - run: vp check
      - run: vp test
      - run: vp build

Esto reemplaza los pasos separados de lint, formato, comprobación de tipos y compilación por cuatro invocaciones de vp que leen del mismo vite.config.ts que utilizan sus desarrolladores en local.

Qué tener en cuenta antes de adoptarlo

Algunas advertencias honestas sobre la versión actual:

• Oxfmt sigue siendo pre-1.0. Compare su salida con su configuración base de Prettier en una rama antes de cambiar bases de código de producción.
• Los ecosistemas de frameworks siguen teniendo sus propias convenciones. Aunque Vite+ puede crear la estructura de proyectos para frameworks como Nuxt y TanStack Start, la configuración y los flujos de trabajo específicos de cada framework pueden seguir viviendo fuera del modelo de configuración unificada de Vite+.
• Pre-1.0 significa que son posibles cambios con ruptura de compatibilidad. Fije la versión de vp en CI y lea el changelog de Vite+ antes de actualizar.

Próximos pasos

Instale Vite+ en un proyecto secundario esta semana, ejecute vp check una vez y observe cómo se siente su cadena de herramientas cuando seis herramientas responden a un único comando. Si esa experiencia se mantiene, pruebe vp migrate en un proyecto Vite no crítico y revise el diff antes de hacer el merge — la migración es rápida, pero la revisión es donde se detectan los casos límite.

Preguntas frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.