Vite+とは｜1.0の使い方と素のViteとの違いを実測

この記事で実際に動かしたもの：npm で入れた vite-plus 1.5.0 で新規プロジェクトを作り、vp の主なコマンドをすべて実行しました。同じソースを素の Vite 8.3.6＋Vitest 5.1.0＋ESLint 10.14.0＋Prettier 3.9.10 でも動かし、300ファイル（約2万9千行）の TypeScript で時間を比べています。

flowchart LR
    B[vite.config.ts<br>設定は1つ] --> C[vp dev・build<br>Vite 8＋Rolldown]
    B --> D[vp check<br>Oxfmt＋Oxlint]
    B --> E[vp test<br>Vitest 5]
    B --> F[vp pack<br>tsdown]
    B --> G[vp run<br>Vite Task]

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04（x86-64・2 CPU。ほかの作業と同時に動く共有マシンで、計測中のロードアベレージは3〜5）、Node.js 22.23.4、npm 10.9.9、pnpm 10.34.9。Vite+ は公式のインストールスクリプト（curl -fsSL https://vite.plus | bash）ではなく、npm レジストリから vite-plus@1.5.0 をプロジェクトに入れて node_modules/.bin/vp を使いました。プロジェクトは vp create vite:application（npm）で作り、サーバーはすべて 127.0.0.1 で起動しています。比較用の素の構成は create-vite 9.3.4 の vanilla-ts に Vitest 5.1.0・ESLint 10.14.0・typescript-eslint 8.72.1・Prettier 3.9.10・TypeScript 6.0.3 を入れたものです。vp migrate は作業場所の容量の都合で、依存のインストールだけ npm の dry-run にして実行し、移行後の確認は同じ vite-plus 1.5.0 の node_modules で行いました。グローバル CLI のインストール（シェル・PowerShell・Homebrew・Windows のインストーラー）、vp env による Node.js の管理、GitHub Actions・GitLab CI の連携は公式ドキュメントの範囲です。リリース日・同梱ツールの版・ライセンスは VoidZero の公式ブログ、viteplus.dev の公式ドキュメント、GitHub のリリースノート、npm レジストリの公開日時で確かめました（確認日 2026年11月6日）。

Vite+とは（何が・いつ・誰に・いくらで）

この節では、Vite+ が何で、1.0 がいつ出て、誰がどの条件で使えるのかが1枚の表で分かります。

Vite+ は、Vite・Vitest・Rolldown・Oxc を作っている VoidZero が出した「Web 開発の統合ツールチェーン」です。 公式の発表では「フレームワークでもパッケージマネージャーでもなく、Vite の置き換えでもない」と説明されています。React のアプリ、Vue のコンポーネントライブラリ、Node.js の CLI、モノレポのどれにも使えます。

アルファの発表では、当初は企業向けの有料ライセンスも検討していたものの、「どの機能を有料にするかの議論に疲れた」として MIT で完全にオープンソースにした、と書かれています。1.0 の GitHub リリースノートには「v1.0.0-rc.1 をコードの変更なしで安定版にした」とあり、Node.js の要件（^22.18.0 || ^24.11.0 || >=26.0.0）と、vp test が Vitest 5 に上がったことが破壊的変更として挙がっています。

Vite+に入っているツールとvpコマンド一覧

この節では、vp の各コマンドの中身が何のツールかと、手元の 1.5.0 に入っていた版が分かります。

vp のコマンドは「中で動くツール」が決まっています。 下の表は公式発表の9コマンドに、手元の vp help で出たコマンドを加えたものです。

どの版が入っているかは vp --version か vp toolchain で分かります。手元の 1.5.0 では次のとおりでした。

$ vp --version
vp v1.5.0

Local vite-plus:
  vite-plus  v1.5.0

Tools:
  vite             v8.3.5
  rolldown         v1.2.16
  vitest           v5.1.0
  oxfmt            v0.76.0
  oxlint           v1.91.0
  oxlint-tsgolint  v7.0.2005
  tsdown           v0.23.4

1.0.0 のリリースノートに載っていた版（vite 8.3.1・rolldown 1.2.11・vitest 5.0.1・oxlint 1.85.0・oxfmt 0.70.0・tsdown 0.23.0）から、5週間で全部が上がっています。vite-plus を上げると中のリンターと整形ツールも一緒に上がるので、1.5.0 のリリースノートにも「以前は通ったコードに指摘が出ることがある」と注意書きがあります。 CI で vp check を使うなら、版を固定して上げるときに vp fmt をかけ直す運用にします。

Vite+のインストール（グローバルCLIとプロジェクト単位）

この節では、Vite+ の2通りの入れ方と、この記事で npm から入れた手順・かかった時間・容量が分かります。

公式ドキュメントでは、インストール後に新しいシェルを開いて vp help を実行する流れです。Windows のインストーラーは「まだコード署名されていない」ため SmartScreen の警告が出ることがある、Alpine Linux では先に apk add libstdc++ が要る、と書かれています。グローバル CLI をやめるときは vp implode です。

この記事では、空のフォルダーで次を実行しました。

$ npm init -y
$ npm install vite-plus@1.5.0
added 85 packages in 34s
$ ls node_modules/.bin
lz-string  nanoid  oxfmt  oxlint  rolldown  tsgolint  vite  vitest  vp  vpr  vpx  why-is-node-running

大きいのは、OS ごとに分かれたネイティブバイナリです（Linux x64 では vite-plus 本体のバイナリ 37MB、tsgolint 22MB、Rolldown 21MB、Oxlint 16MB）。npm のキャッシュは、このインストールだけで 200MB を超えました。 容量の小さい CI やコンテナでは、キャッシュの置き場所と掃除を先に決めておきます。

vp createで新規プロジェクトを作る（生成されるファイル）

この節では、vp create のテンプレートの選び方と、作られるファイルの中身が分かります。

テンプレートは vp create --list で一覧が出ます。 Vite+ 自身のテンプレート4つと、よく使われるフレームワークの作成コマンドへの近道が並びます。

$ vp create --list
Vite+ Built-in Templates:
  vite:monorepo     Create a new monorepo
  vite:application  Create a new application
  vite:library      Create a new library
  vite:generator    Scaffold a new code generator (monorepo only)

Popular Templates (shorthand):
  vite             Official Vite templates (create-vite)
  @tanstack/start  TanStack applications (@tanstack/cli create)
  next-app         Next.js application (create-next-app)
  nuxt             Nuxt application (create-nuxt)
  react-router     React Router application (create-react-router)
  svelte           Svelte application (sv create)
  vue              Vue application (create-vue)

対話なしで、npm・Git なし・エージェント用ファイルなしにして作りました。

$ vp create vite:application --directory app --package-manager npm \
    --no-git --no-agent --no-editor --no-hooks --no-interactive
● npm@latest installing...
● npm@12.2.2 installed
● Running: npx create-vite@latest app --no-interactive --no-immediate --no-rolldown
◆ ✔ Created vite.config.ts in app/vite.config.ts
● Installing dependencies...
◇ Scaffolded app with Vite application
• Node 22.23.4  npm 12.2.2
→ Next: cd app && vp run

中では create-vite が動き、そのあと Vite+ 用に書き換えています。注目したいのは、手元の npm（10.9.9）ではなく、vp が npm 12.2.2 を自分で取ってきて使っている点です。 作られた package.json は次のとおりです。

{
  "name": "app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vp dev",
    "build": "tsc && vp build",
    "preview": "vp preview"
  },
  "devDependencies": {
    "typescript": "~7.0.2",
    "vite": "npm:@voidzero-dev/vite-plus-core@1.5.0",
    "vite-plus": "1.5.0"
  },
  "overrides": {
    "vite": "npm:@voidzero-dev/vite-plus-core@1.5.0"
  },
  "devEngines": {
    "packageManager": {
      "name": "npm",
      "version": "12.2.2",
      "onFail": "download"
    }
  }
}

• 1vite は別名で入る"vite" という名前で Vite+ 版のコア（vite-plus-core）が入り、overrides で依存先の vite もそろえる
• 2TypeScript は 7 系テンプレートは typescript ~7.0.2（Go で書き直された版）。tsc --noEmit は手元で 0.14秒
• 3パッケージマネージャーの版が固定されるdevEngines に npm 12.2.2。手元の npm が違う版だと npm install が止まる（エラーの節）
• 4vitest・eslint・prettier は入らないテストもリントも整形も vite-plus の中に入っている

vite.config.ts は、整形（fmt）とリント（lint）の設定だけが入った短いものです。typeAware と typeCheck が最初から有効なので、リントのときに型エラーも出ます。

import { defineConfig } from "vite-plus";

export default defineConfig({
  fmt: {},
  lint: {
    jsPlugins: [{ name: "vite-plus", specifier: "vite-plus/oxlint-plugin" }],
    rules: { "vite-plus/prefer-vite-plus-imports": "error" },
    options: { typeAware: true, typeCheck: true },
  },
});

vp dev・vp build・vp previewの使い方

この節では、開発サーバー・本番ビルド・ビルドの確認を vp で動かしたときの出力と、素の Vite との出力の違いが分かります。

vp dev は Vite の開発サーバーそのものです。 起動してから最初の応答が返るまで 0.35秒、表示は「VITE+ v1.5.0 ready in 152 ms」でした。

$ vp dev --host 127.0.0.1 --port 53011 --strictPort
note: You are running `vp dev` as a Vite+ built-in command. If you meant to run the dev npm script, use `vpr dev` instead.

  VITE+ v1.5.0  ready in 152 ms

  ➜  Local:   http://127.0.0.1:53011/

$ curl -s http://127.0.0.1:53011/src/counter.ts | head -3
export function setupCounter(element) {
	let counter = 0;
	const setCounter = (count) => {

TypeScript の型注釈が外れた JavaScript が返り、HTML には /@vite/client が差し込まれていました。ここまでは素の Vite と同じ動きです。

本番ビルドも同じです。同じソースを vp build と素の vite build（8.3.6）でビルドすると、出力ファイルの名前（ハッシュ）と大きさが完全に一致しました。

$ vp build
transforming...
✓ 9 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                  0.45 kB │ gzip: 0.29 kB
dist/assets/vite-BF8QNONU.svg    8.70 kB │ gzip: 1.60 kB
dist/assets/hero-CLDdwZDr.png   13.05 kB
dist/assets/index-CsUDhMuy.css   4.10 kB │ gzip: 1.46 kB
dist/assets/index-wktXvZw9.js    4.49 kB │ gzip: 2.02 kB

✓ built in 62ms

vp preview で dist を 127.0.0.1:53012 に出し、index-wktXvZw9.js が 200 OK・Content-Length 4496 で返ることも確かめました。

開発サーバーを止めるときは、ターミナルで Ctrl+C を押します。手元では、親の vp プロセスにだけ終了シグナル（SIGTERM）を送ると、子の node（vite.js dev）が残ってポートを使い続けました。スクリプトから止めるときは、プロセスグループごと止めます。

vp check・vp lint・vp fmtの使い方（エラー表示の実物）

この節では、整形・リント・型チェックを vp check で一度に行う使い方と、エラーがどう表示されるかが分かります。

vp check は「整形の確認 → リント → 型チェック」を1回で行い、--fix で直せるものは直します。 作った直後のテンプレートは整形されておらず、最初の check は失敗しました。

$ vp check
error: Formatting issues found
package.json (0ms)
src/counter.ts (0ms)
src/main.ts (0ms)
src/price.test.ts (0ms)
src/price.ts (0ms)
src/style.css (0ms)
vite.config.ts (0ms)

Found formatting issues in 7 files (253ms, 2 threads). Run `vp check --fix` to fix them.
（終了コード 1）

$ vp check --fix
pass: Formatting completed for checked files (1.1s)
pass: Found no warnings, lint errors, or type errors in 5 files (488ms, 2 threads)

Oxfmt の既定は Prettier に近く、文末にセミコロンが付き、文字列は二重引用符になりました（return Math.round(price * (1 + rate)) → 末尾に ;）。

わざと誤りを入れたファイルで、どこまで見つかるかを確かめます。

import { expect } from "vitest";
const total: number = "100";
export function f() {
  const unused = 1;
  if (total == 100) debugger;
  return expect;
}

$ vp check
pass: All 10 files are correctly formatted (263ms, 2 threads)
error: Lint or type issues found
⚠ eslint(no-unused-vars): Variable 'unused' is declared but never used. Unused variables should start with a '_'.
  ⚠ eslint(no-debugger): `debugger` statement is not allowed
  × vite-plus(prefer-vite-plus-imports): Use 'vite-plus/test' instead of 'vitest' in Vite+ projects.
  × typescript(TS2322): Type 'string' is not assignable to type 'number'.
   ╭─[src/bad.ts:2:7]
 1 │ import { expect } from "vitest";
 2 │ const total: number = "100";
   ·       ─────
   ╰────
  × typescript(TS6133): 'unused' is declared but its value is never read.

Found 3 errors and 2 warnings in 6 files (1.1s, 2 threads)

型エラー（TS2322・TS6133）が tsc を動かさずに出ている点が、素の構成との大きな違いです。 素の構成では、同じファイルに対して ESLint（no-unused-vars・no-debugger の2件）と tsc（TS2322・TS6133 の2件）を別々に動かす必要がありました。一方、== は既定のルールでは指摘されませんでした。厳しくしたいルールは vite.config.ts の lint.rules に足します。

vp testの使い方（vite-plus/testから読み込む）

この節では、vp test でテストを書いて動かす方法と、素の Vitest との書き方の違いが分かります。

vp test の中身は Vitest 5.1.0 で、テストの書き方は Vitest と同じです。違いは import 元だけで、vitest ではなく vite-plus/test から読み込みます。 テンプレートのリント設定には prefer-vite-plus-imports ルールが入っていて、vitest から読み込むとエラーになります（前の節の出力）。

// src/price.ts
export function withTax(price: number, rate = 0.1): number {
  return Math.round(price * (1 + rate));
}

// src/price.test.ts
import { describe, expect, test } from "vite-plus/test";
import { withTax } from "./price";

describe("withTax", () => {
  test("10%の税込み", () => {
    expect(withTax(1000)).toBe(1100);
  });
  test("8%の税込み", () => {
    expect(withTax(980, 0.08)).toBe(1058);
  });
});

$ vp test

 RUN  v5.1.0 /dev/shm/t301/w/app

 ✓ src/price.test.ts (2 tests) 4ms

 Test Files  1 passed (1)
      Tests  2 passed (2)
   Start at  04:22:34
   Duration  166ms (transform 45%, import 36%, tests 10%, worker 9%)

テスト用の設定ファイル（vitest.config.ts）は作っていません。必要になったら vite.config.ts の test に書きます。vi.fn・vi.mock などのモックの書き方は Vitest と同じで、関連記事「Vitestモックの使い方｜vi.mock・vi.fn・vi.spyOnの使い分け表」で扱っています。1.5.0 のリリースノートによると、Vitest のブラウザーモードの既定のポートは 23315 に変わりました。

vp runとタスクキャッシュの使い方

この節では、vp run で package.json のスクリプトを動かす方法と、キャッシュが効く条件・外れる条件が実測で分かります。

package.json のスクリプトは、既定ではキャッシュされません。 1回だけキャッシュを使うなら --cache を付け、いつも使うなら vite.config.ts の run.tasks に書きます（公式ドキュメントでは run.tasks のタスクは既定でキャッシュされる）。

$ vp run build
$ tsc ⊘ cache disabled
$ vp build ⊘ cache disabled
…
vp run: 2/2 successful.

$ vp run --cache build      ← 1回目
vp run: 0/2 cache hit (0%), 2/2 successful.

$ vp run --cache build      ← 2回目（何も変えずに）
$ tsc ◉ cache hit, replaying
$ vp build ◉ cache hit, replaying
…
vp run: 2/2 cache hit (100%), 2/2 successful, 401ms saved.

tsc && vp build は2つのタスクに分けて記録されます。2回目は全体で 84ms（1回目は 501ms）で、出力はそのまま再生されました。次に、画面からは読み込んでいない src/price.ts だけを書き換えて実行し、理由を --last-details で見ました。

$ vp run --last-details
Statistics:   2 tasks • 1 cache hit • 1 cache miss
Performance:  50% cache hit rate, 218ms saved in total

Task Details:
  [1] app#build: $ tsc ✓
      → Cache miss: 'src/price.ts' modified
  [2] app#build: $ vp build ✓
      → Cache hit - output replayed - 218ms saved

tsc は src の全ファイルを読むので外れ、vp build は price.ts を読まないので当たりました。 入力ファイルを手で並べなくても、実際に読んだファイルで判定していることが分かります。環境変数で結果が変わるタスクは、cache: { env: ["NODE_ENV"] } のように書きます。

import { defineConfig } from "vite-plus";

export default defineConfig({
  run: {
    tasks: {
      build: {
        command: "vp build",
        dependsOn: ["lint"],
        cache: { env: ["NODE_ENV"] },
      },
      deploy: {
        command: "deploy-script --prod",
        cache: false,
        dependsOn: ["build", "test"],
      },
    },
  },
});

上は公式ドキュメントの例です。同じタスク名を vite.config.ts と package.json の両方に書くことはできません。

vp staged・vp hooks・vp packの使い方

この節では、コミット前に変更ファイルだけ検査する設定と、ライブラリをビルドする vp pack の出力が分かります。

husky と lint-staged の役目は、vp hooks と vp staged が受け持ちます。 手順は次の4つで、手元のリポジトリで試しました。

$ vp hooks status
Preference:     enabled
Hooks dir:      .vite-hooks
core.hooksPath: .vite-hooks/_ (Vite+ dispatcher)
Dispatcher:     installed (.vite-hooks/_)
Project hooks:  pre-commit

$ printf 'export const  a=1\n' > src/ugly.ts
$ git add -A && git commit -m init
✔ vp check --fix
$ git show HEAD:src/ugly.ts
export const a = 1;

コミットには 4.4秒かかりました（最初のコミットのため、退避用の stash は作られないという警告つき）。husky からの移り方を考えるときは、関連記事「Git hooks・husky v9の設定方法｜実行結果とlefthook比較」の構成と見比べると違いがつかめます。公式の移行ガイドによると、husky・lefthook・simple-git-hooks・yorkie は vp migrate で自動では移されず、警告が出るだけです。

vp pack は tsdown でライブラリを作ります。 1ファイルを型定義つきで出力しました。

$ vp pack src/price.ts --dts
ℹ entry: src/price.ts
ℹ Cleaning 8 files
warn: TypeScript 7.0 does not yet have a stable API and is experimental. Some options will be unavailable.
ℹ Emit types with typescript@7.0.2
ℹ dist/price.mjs    0.12 kB │ gzip: 0.12 kB
ℹ dist/price.d.mts  0.07 kB │ gzip: 0.08 kB
✔ Build complete in 270ms

$ cat dist/price.d.mts
export declare function withTax(price: number, rate?: number): number;

「Cleaning 8 files」は、直前に vp build で作った dist の中身を消したという意味です。アプリとライブラリを同じプロジェクトで出すなら、出力先を分けます。

素のViteとの違いを実測（設定ファイル・依存の数・速さ）

この節では、Vite+ と「素の Vite＋Vitest＋ESLint＋Prettier」を同じソースで比べた、設定ファイル・依存・時間の実測が分かります。

素の構成は create-vite の vanilla-ts に、Vitest・ESLint（@eslint/js と typescript-eslint の型を使う推奨設定）・Prettier を足しました。ESLint の設定の書き方は関連記事「ESLint flat config設定｜v10対応の完成形コピペ集」と同じ flat config です。

依存の数と設定ファイルは減りますが、容量は Vite+ の方が大きくなりました。 Rust 製のネイティブバイナリが入るためです。

時間は、生成した300ファイル（306ファイル・29,099行）の TypeScript で、各3回の中央値を取りました。共有マシンでの計測なので、差の大きさの目安として見てください。

リントの比較は、ルールの中身がそろっていない点に注意が要ります。ESLint 側は recommendedTypeChecked、Vite+ 側は vp migrate がその設定から移した146ルールです。型チェックも、素の構成は TypeScript 6 の tsc、Vite+ は Go で書かれた tsgolint で、この差の多くは TypeScript 7 世代の速さによるものです（Vite+ のテンプレートの tsc 7.0.2 は小さなプロジェクトで 0.14秒）。TypeScript 7 自体の変更点は関連記事「TypeScript 7の新機能と変更点｜6から7への移行と破壊的変更一覧」で扱っています。

小さなテンプレート（数ファイル）では差がほとんど出ませんでした。5回の中央値で、vp test 0.55秒・vitest run 0.52秒、vp build 0.30秒・vite build 0.24秒、vp lint 1.5秒・eslint 1.7秒です。ファイル数が増えるほど差が開く、と考えるのが実態に合っています。

既存のViteプロジェクトからvp migrateで移行する

この節では、vp migrate が既存のプロジェクトの何をどう書き換えるかが、実際の差分で分かります。

公式の移行ガイドでは、先に Vite 7 以上・Vitest 4 以上に上げておき、移行後に vp install → vp check → vp test → vp build の順で確かめる流れです。モノレポではワークスペースのルートで実行します（メンバー1つだけは移せない）。ガイドには「ほとんどのプロジェクトで、vp migrate のあとに手での調整が要る」とも書かれています。

1. 1Git にコミットしてから始める元に戻す公式の手順は無い。ロックファイルと設定を Git で戻せるようにする
2. 2今の依存を入れておくESLint の設定を読むため、@eslint/js などが node_modules に要る
3. 3vp migrate --no-interactiveプロジェクトの外の vp（グローバル CLI）で実行する
4. 4差分を読む移せなかったルール・import の書き換え・scripts を確かめる
5. 5vp install → check → test → buildCI の手順も vp check などに置き換える

前の節の素の構成に対して実行した結果です。

$ vp migrate --no-interactive --no-agent --no-editor --no-hooks
▲ No package manager is declared in package.json; using npm for this migration
  without adding a pin. Run `vp env pin` to declare it explicitly.
● Prettier configuration detected. Auto-migrating to Oxfmt...
◇ Migrated . to Vite+ 1.5.0
• Node 22.23.4  npm 10.9.9
• 3 config updates applied, 1 file had imports rewritten
• ESLint rules migrated to Oxlint
• Prettier migrated to Oxfmt
! Warnings:
  - Skipped 2 rules:
    - 2 Unsupported
      - no-dupe-args: Superseded by strict mode.
      - no-octal: Superseded by strict mode.

$ git status --short
 M .gitignore
 D .prettierrc
 D eslint.config.js
 M package-lock.json
 M package.json
 M src/price.test.ts
?? vite.config.ts

eslint.config.js と .prettierrc が消え、その中身が vite.config.ts の lint と fmt に移りました。 移せなかった2ルールは、ES モジュールでは strict モードで同じ誤りが構文エラーになるもので、実害はありません。package.json は次のように変わりました。

   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
+    "dev": "vp dev",
+    "build": "tsc && vp build",
+    "preview": "vp preview"
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "eslint": "^10.14.0",
     "globals": "^17.14.0",
-    "prettier": "^3.9.10",
     "typescript": "~6.0",
-    "typescript-eslint": "^8.72.1",
-    "vite": "^8.3.6",
-    "vitest": "^5.1.0"
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.5.0",
+    "vite-plus": "1.5.0"
+  },
+  "overrides": {
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.5.0"
   }

テストの import … from "vitest" は "vite-plus/test" に書き換わり、.gitignore には .vitest/ が足されました。vite.config.ts の lint には、元の設定にあった無視パターン（dist・eslint.config.js）、ブラウザーの環境、typescript/no-unsafe-assignment などの型を使うルールが JSON の形で並びます。fmt には printWidth: 80 と sortPackageJson: false が入り、Prettier の既定に合わせてありました。移行後、vp fmt で 310ファイルを整形し、vp check が「306 files」でエラーなしになったことを確かめています。不要になった globals は残ったので、手で消します。

既存の vite.config.ts の書き方（エイリアス・プロキシ・環境変数など）はそのまま使えます。設定項目は関連記事「vite.configの書き方｜用途別コピペ一覧とVite 8の変更点」にまとめています。

Vite+のよくあるエラーとつまずき

この節では、Vite+ を動かして実際に出たエラーの原文と、原因・直し方が分かります。

素の構成側でも、比べる途中で次の2つが出ました。どちらも Vite+ に移ると出なくなる種類のものです。

$ npm install -D vitest eslint @eslint/js typescript-eslint globals prettier
While resolving: plain@0.0.0
Found: typescript@7.0.2
Could not resolve dependency:
peer typescript@">=4.8.4 <6.1.0" from typescript-eslint@8.72.1

$ npx eslint .
/dev/shm/t301/w/plain/eslint.config.js
  0:0  error  Parsing error: /dev/shm/t301/w/plain/eslint.config.js was not found by the project service. Consider either including it in the tsconfig.json or including it in allowDefaultProject

1つめは、2026年11月6日時点の typescript-eslint 8.72.1 が TypeScript 7 に対応していないため、2つめは型を使うリントで、tsconfig.json の対象外の設定ファイルまで読もうとしたためです。後者は ignores に eslint.config.js を足して直しました。

Vite+を使うかの判断表

この節では、プロジェクトの状況から、Vite+ を入れるか、いつ入れるかを1行で選べます。

React の環境を Vite で作る手順そのものは、関連記事「React環境構築をViteで行う手順｜create viteの使い方」で扱っています。Vite+ でも vp create vite -- --template react-ts で同じテンプレートを使えます。

よくある質問

この節では、Vite+ について検索されることの多い疑問に短く答えます。

Q. Vite+ と Vite の違いは何ですか？
Vite はビルドと開発サーバーのツールで、Vite+ はその Vite に、テスト（Vitest）・リント（Oxlint）・整形（Oxfmt）・ライブラリのビルド（tsdown）・タスクランナー・Node.js の管理を足したものです。vp build の出力は素の Vite と同じでした。

Q. Vite+ は有料ですか？
無料です。MIT ライセンスのオープンソースで、公式発表に有料プランの記載はありません。当初は企業向けの有料ライセンスも検討されていましたが、アルファの時点で取りやめています。

Q. Vite+ を入れると Vite は使えなくなりますか？
使えます。公式は「Vite の置き換えではない」と説明しており、node_modules の中では vite の名前で Vite+ 版のコアが入ります。vite.config.ts の server・build などの設定もそのまま書けます。

Q. vp と vpr と vpx の違いは？
vp は組み込みコマンド（dev・build など）、vpr は package.json のスクリプトの実行（vp run と同じ）、vpx はパッケージのコマンドを取ってきて実行するもの（npx に相当）です。

Q. pnpm・Yarn・Bun でも使えますか？
使えます。vp create --package-manager で pnpm・npm・yarn・bun を選べ、vp install は選んだパッケージマネージャーで依存を入れます。手元では vp が npm 12.2.2 を自分で取ってきて使いました。

Q. Node.js はどの版が要りますか？
^22.18.0・^24.11.0・26 以上です（1.0 から）。Node.js 22.23.4 で動きました。

Q. Windows で使えますか？
使えます。公式ドキュメントでは PowerShell の irm https://vite.plus/ps1 | iex か、vp-setup.exe で入れます。インストーラーはまだコード署名されていないため、SmartScreen の警告が出ることがあると書かれています。

Q. ESLint のプラグインはそのまま使えますか？
そのままではありません。vp migrate は対応するルールを Oxlint に移し、移せないものを一覧で出します。Oxlint には JavaScript のプラグインを読む jsPlugins の仕組みがあり、Vite+ 自身のルールもこれで入っています。

Q. CI ではどう使いますか？
公式発表によると、GitHub Actions 用と GitLab CI/CD 用の setup-vp があります。手順は「vp install → vp check → vp test → vp build」の4つにまとまります。

Q. Cloudflare に入ったことで何か変わりますか？
VoidZero は2026年6月4日の発表で、Vite・Vitest・Rolldown・Oxc・Vite+ はオープンソースで MIT のまま続くと明記しています。

Q. モノレポでも使えますか？
使えます。vp create vite:monorepo で作れ、vp run がワークスペースをまたいでタスクを実行・キャッシュします。移行はワークスペースのルートで行います。

まとめ

この節では、Vite+ 1.0 について押さえておく5点が分かります。

• Vite+ は vp コマンド1つと vite.config.ts 1つにまとめた統合ツールチェーンで、1.0 は2026年9月28日、2026年11月6日時点の最新は 1.5.0。MIT で無料です。
• dev・build は素の Vite と同じ動きで、ビルドの出力ファイルは完全に一致しました。
• vp check は整形・リント・型チェックを1回で行い、300ファイルで素の構成の 16.9秒に対して 1.6秒でした（ルールと TypeScript の版の違いも含んだ手元の値）。
• 依存は8つから3つ、設定ファイルは3つから2つに減る一方、node_modules は 95MB から 161MB に増えました。
• 既存プロジェクトは vp migrate で ESLint・Prettier の設定まで移せますが、Git フックや移せないルールは手で確かめます。

参考・出典

この節では、この記事で確かめた公式の情報源が分かります（確認日 2026年11月6日）。

• VoidZero「Announcing Vite+ 1.0」（2026年9月28日）：https://voidzero.dev/posts/announcing-vite-plus-1-0
• VoidZero「Announcing Vite+ Alpha」（2026年3月13日）：https://voidzero.dev/posts/announcing-vite-plus-alpha
• VoidZero「VoidZero is joining Cloudflare」（2026年6月4日）：https://voidzero.dev/posts/voidzero-cloudflare
• Vite+ 公式ドキュメント Getting Started：https://viteplus.dev/guide/
• Vite+ 公式ドキュメント（Run・Commit Hooks・Migrate・Config）：https://viteplus.dev/guide/run ／ https://viteplus.dev/guide/commit-hooks ／ https://viteplus.dev/guide/migrate ／ https://viteplus.dev/config/
• GitHub voidzero-dev/vite-plus リリースノート v1.0.0・v1.5.0：https://github.com/voidzero-dev/vite-plus/releases
• npm レジストリ vite-plus（各版の公開日時・依存）：https://www.npmjs.com/package/vite-plus

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。