Erste Schritte mit Vite+

Vite+ ist eine einheitliche Entwickler-Toolchain von VoidZero — dem Unternehmen, das von Evan You, dem Schöpfer von Vite und Vue, gegründet wurde — und kombiniert Vite, Vitest, Rolldown, Oxlint, Oxfmt, tsdown und Vite Task hinter einer einzigen CLI namens vp. Sie wurde am 13. März 2026 als Alpha-Release angekündigt; das Alpha-Tag wurde mit v0.1.21 am 13. Mai 2026 entfernt, und das aktuelle Release zum Zeitpunkt des Verfassens ist v0.1.23 (29. Mai 2026). Das Projekt befindet sich noch vor Version 1.0 — behandeln Sie es daher als Frühphasensoftware und nicht als produktionserprobten Stack. Es ist jedoch nicht mehr im Alpha-Stadium, und der grundlegende Getting-Started-Workflow ist stabil genug für den Einsatz in realen Projekten.

Dieser Leitfaden führt durch die Installation von Vite+, das Scaffolding eines Projekts, das Starten des Dev-Servers, die Ausführung von Checks und Tests, die Erstellung eines Production-Builds sowie das Verständnis dafür, wie vp in einen typischen Frontend-Workflow eingebettet ist.

Was Vite+ tatsächlich ist

Vite+ ist eine CLI-Distribution, die eine kuratierte Sammlung von Frontend-Tools hinter einem einzigen Einstiegspunkt bündelt. Jede Komponente ist ein bestehendes Projekt und keine Neuentwicklung: Vite 8 als Dev-Server, Rolldown als Rust-basierter Production-Bundler mit API-Kompatibilität zu Rollup, Vitest als Test-Runner, Oxlint und Oxfmt als Linter und Formatter, die auf der Oxc-Compiler-Infrastruktur aufbauen, tsdown für das Library-Bundling sowie Vite Task für die Aufgabenorchestrierung und das Caching in Monorepos.

Die Performance-Gewinne dieser Tools sind struktureller, nicht additiver Natur: Rolldown, Oxlint und Oxfmt teilen sich Oxc — VoidZeros Rust-basierte JavaScript-Compiler-Infrastruktur — als gemeinsame Parsing- und Transformationsschicht. Der Geschwindigkeitsvorteil ergibt sich daraus, dass die zugrundeliegende Engine einmalig schnell ist, anstatt dass jedes Tool unabhängig voneinander optimiert wird.

Vite+ ergänzt Vite, anstatt es zu ersetzen. Wer Vite bereits verwendet, kann Vite+ schrittweise einführen; wer Vite noch nicht kennt, sollte Vite+ nicht als Einstiegspunkt wählen.

Voraussetzungen

Stellen Sie vor der Installation sicher, dass Ihre Umgebung die Laufzeitanforderungen von Vite 8 erfüllt. Vite 8 erfordert Node.js 20.19 oder höher bzw. Node.js 22.12 oder höher — Vite+ ersetzt Node.js nicht, sondern verwaltet die für Ihr Projekt verwendete Node.js-Version über vp env. Der Betrieb von Vite+ auf einer älteren Node.js-Version führt zu einem Fehler, bevor der Dev-Server startet.

Sie benötigen außerdem eine POSIX-kompatible Shell unter macOS oder Linux bzw. PowerShell unter Windows.

Vite+ installieren

Vite+ wird als einzelne Binärdatei namens vp installiert. Unter macOS oder Linux:

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

Unter Windows PowerShell:

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

Starten Sie Ihr Terminal neu und überprüfen Sie anschließend die Installation:

vp --version
vp help

Während der Installation fragt Vite+, ob es Ihre globale Node.js-Laufzeit verwalten soll. Wenn Sie bereits nvm, fnm oder asdf verwenden, können Sie den Managed-Modus ablehnen — Vite+ verwendet dann das System-Node.js. Diese Einstellung lässt sich später mit vp env on oder vp env off ändern.

Ihr erstes Projekt erstellen

vp create erstellt ein neues Projekt aus einem Vite+-Template und fragt interaktiv nach Framework, Paketmanager sowie TypeScript oder JavaScript:

vp create

Die interaktive Eingabeaufforderung ermöglicht die Auswahl eines Templates (Vite, Vue, Svelte, Nuxt, Next.js, React Router oder TanStack Start), eines Paketmanagers (npm, pnpm, yarn, bun) sowie TypeScript oder JavaScript. Um die Eingabeaufforderung zu überspringen, übergeben Sie direkt einen Template-Namen:

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

Das Scaffolding erzeugt eine einzelne vite.config.ts, die die Konfiguration für alle Tools der Toolchain enthält — Linter, Formatter, Test-Runner und Staged-File-Hooks lesen alle aus dieser Datei.

Den Dev-Server mit vp dev starten

vp dev startet den Vite 8-Entwicklungsserver mit Standardeinstellungen — für den Standardfall sind keine Flags erforderlich:

vp dev

vp dev startet den Vite 8-Entwicklungsserver direkt. Es führt nicht das dev-Skript aus Ihrer package.json aus — das ist ein häufiger Verwechslungspunkt und das genaue Gegenteil des Verhaltens von npm run dev. Wenn Ihr Projekt ein benutzerdefiniertes dev-Skript hat (zum Beispiel eines, das einen Backend-Prozess parallel zum Frontend startet), rufen Sie es explizit auf:

vp run dev

Dieselbe Regel gilt für vp test und vp build: Diese sind eingebaute Befehle, die über Vite+‘s integrierte Tools geleitet werden. vp run <script> ist der Ausweg für beliebige package.json-Skripte und erhält bei Aufruf mit --cache zusätzlich Vite Tasks eingabe-bewusstes Caching.

Die einheitliche vite.config.ts

Vite+ fasst die Konfiguration für alle eingebundenen Tools — Vite, Vitest, Oxlint, Oxfmt und Staged-File-Hooks — in einer einzigen vite.config.ts im Projektstamm zusammen. Anstatt separate .eslintrc-, .prettierrc- und vitest.config.ts-Dateien zu pflegen, wird alles über einen einzigen typisierten defineConfig-Aufruf ausgedrückt.

Eine minimale Konfiguration sieht folgendermaßen aus:

import { defineConfig } from 'vite-plus'

export default defineConfig({})

Mit dem Wachstum des Projekts lässt sich die Konfiguration für einzelne Tools ergänzen:

import { defineConfig } from 'vite-plus'

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

Vite+ unterstützt auch Staged-File-Checks über einen staged-Konfigurationsblock:

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',
  },
})

Um Checks zum Commit-Zeitpunkt zu aktivieren, installieren Sie die Git-Hooks:

vp config

Danach führt Vite+ die konfigurierten Staged-File-Tasks automatisch während Commits über vp staged aus — ohne separate Husky- oder lint-staged-Konfiguration.

Wie der Rest von Vite+ befindet sich auch das Konfigurationssystem noch in der Weiterentwicklung, solange das Projekt vor Version 1.0 ist. Wer neue Releases übernimmt, sollte vor einem Upgrade die offizielle Dokumentation und die Release-Notes auf Konfigurationsänderungen prüfen.

Checks mit vp check ausführen

vp check führt Formatierung, Linting und typbewusste Prüfungen in einem einzigen Durchlauf gegen das aktuelle Projekt aus:

vp check

Um automatisch zu beheben, was sicher behoben werden kann:

vp check --fix

--fix behandelt die meisten Formatierungsprobleme und viele Lint-Regeln, kann jedoch keine Typfehler oder Logikfehler beheben. Betrachten Sie es als automatischen Korrektor, nicht als Ersatz für Code-Reviews. Die Typprüfungen werden von tsgolint durchgeführt (einem typbewussten Linter, der auf der TypeScript-Go-Toolchain aufbaut) — nicht durch eine vollständige tsc --noEmit-Kompilierung. Das ist zwar schnell beim Erkennen häufiger Typfehler, ersetzt aber nicht tsc in der CI-Pipeline, wenn eine erschöpfende Typkompilierung erforderlich ist. Da Oxlint, Oxfmt und tsgolint eine Oxc-kompatible Infrastruktur teilen, läuft vp check spürbar schneller als eine vergleichbare ESLint + Prettier + tsc --noEmit-Kette auf derselben Codebase.

Tests mit vp test ausführen

vp test führt die Vitest-Suite einmalig aus und beendet sich — Vite+ kehrt Vitests natives Standardverhalten des Watch-Modus um, sodass der Watch-Modus explizit aktiviert werden muss:

vp test                  # einmalig ausführen (Vite+ überwacht standardmäßig nicht, anders als Vitest)
vp test watch            # Watch-Modus aktivieren
vp test run --coverage   # einmaliger Durchlauf mit Coverage

vp test ruft Vitest unter Verwendung des test-Blocks in vite.config.ts auf. Beachten Sie, dass dies Vitests natives Standardverhalten umkehrt — vp test allein beendet sich nach einem einzigen Durchlauf, während das eigenständige vitest im Watch-Modus verbleiben würde. Da Vitest bereits die Transform-Pipeline von Vite teilt, muss keine separate vitest.config.ts gepflegt werden — dasselbe defineConfig deckt beides ab.

Einen Production-Build mit vp build erstellen

vp build kompiliert ein Production-Bundle mit Vite 8 und Rolldown und gibt es nach dist/ aus, gemäß denselben Konventionen wie vite build:

vp build

vp build kompiliert ein Production-Bundle mit Vite 8 und Rolldown. Die Ausgabe erfolgt nach dist/ gemäß denselben Konventionen wie vite build. Da Rolldown darauf ausgelegt ist, API-kompatibel mit Rollup zu sein, sollen bestehende Rollup-Plugins weiterhin funktionieren — allerdings landen Plugin-Autoren noch Korrekturen für Randfälle, daher sollten benutzerdefinierte Plugins auf einem Branch verifiziert werden, bevor vp build für Releases eingesetzt wird.

Um Build-Eingaben über mehrere Durchläufe hinweg in einem Monorepo zu cachen:

vp run --cache build

Vite Task erstellt Fingerabdrücke der deklarierten Eingaben und überspringt Pakete, deren Eingaben bei nachfolgenden Durchläufen unverändert sind. Dies entspricht demselben Workflow-Ansatz, den Turborepo verfolgt — jedoch direkt in die Toolchain integriert statt als Aufsatz hinzugefügt.

Ein häufiger Fehler beim Wechsel des Bundlers in der Produktion ist eine stille Source-Map-Regression. Bevor Sie eine vp build-Ausgabe deployen, überprüfen Sie, ob Stack Traces in Ihrem Error-Monitoring- oder Session-Replay-Tool noch auf die ursprünglichen Quelldateien verweisen — dies ist eines der häufigsten Build-Tool-Migrationsprobleme, die OpenReplay in realen Session-Daten beobachtet.

vp-Befehlsreferenz

Referenz aktuell für Vite+ v0.1.23 (29. Mai 2026).

Vite+ in GitHub Actions einbinden

Für CI veröffentlicht VoidZero die voidzero-dev/setup-vp-Action, die die vp-CLI installiert und optional Abhängigkeiten cached. Ein minimaler Workflow:

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

Dies ersetzt separate Lint-, Format-, Typprüfungs- und Build-Schritte durch vier vp-Aufrufe, die dieselbe vite.config.ts lesen, die Ihre Entwickler lokal verwenden.

Was vor der Einführung zu beachten ist

Einige ehrliche Hinweise zum aktuellen Release:

• Oxfmt befindet sich noch vor Version 1.0. Vergleichen Sie dessen Ausgabe auf einem Branch mit Ihrer bestehenden Prettier-Baseline, bevor Sie produktive Codebases umstellen.
• Framework-Ökosysteme haben weiterhin ihre eigenen Konventionen. Obwohl Vite+ Projekte für Frameworks wie Nuxt und TanStack Start erstellen kann, können Framework-spezifische Konfigurationen und Workflows weiterhin außerhalb des einheitlichen Konfigurationsmodells von Vite+ liegen.
• Vor Version 1.0 sind Breaking Changes möglich. Pinnen Sie die vp-Version in der CI-Pipeline und lesen Sie das Vite+-Changelog, bevor Sie upgraden.

Nächste Schritte

Installieren Sie Vite+ diese Woche in einem Nebenprojekt, führen Sie einmal vp check aus und beobachten Sie, wie sich Ihre Toolchain anfühlt, wenn sechs Tools auf einen einzigen Befehl hören. Wenn diese Erfahrung überzeugt, probieren Sie vp migrate an einem unkritischen Vite-Projekt aus und prüfen Sie den Diff vor dem Mergen — die Migration ist schnell, aber der Review ist der Moment, in dem Randfälle auffallen.

Häufig gestellte Fragen

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.