医療ITエンジニアの三浦です。
Viteは現在のJS/TS開発では定番のビルドツールとなっています。
私のチームでもフルスタックTypeScriptの開発に、フロントエンド・バックエンドともviteを使っていますが、開発ツール類をVITE+に集約することで開発効率をさらにあげていきたいと考えています。

今回は VITE+ v0.2.5 をWindows環境で試し、プロジェクト作成からテスト、ビルドまで一通り触ってみました。
本記事では以下を紹介します。

Windowsへのインストール
プロジェクト作成
Lint・Formatter設定
テスト実行
開発・ビルド・Preview

VITE+とは

VITE+は、Viteを中心として以下のツールを統合した開発ツールチェーンです。

Vite
Rolldown
Vitest
tsdown
Oxlint
Oxfmt
Vite Task

これらを vp コマンド一つで扱えることが特徴です。

公式サイト

今回確認したバージョンは v0.2.5 です。

Windowsへインストール

WindowsではPowerShellからインストールできます。

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

インストール後は以下でバージョンを確認できます。

vp --version

`vp create` : プロジェクト作成

プロジェクト作成コマンドは以下です。

vp create

今回はシンプルな Vite+ Application を選択しました。

パッケージ（アプリ）名を入力します。vp-sample としました。

使用するパッケージマネージャーを選択します。pnpm を選択しました。

作成するコーディング・エージェント指示ファイルを選択します。今時らしいですね。AGENTS.md がデフォルト選択されているのでそのままとしました。

エディタを選択します。拡張機能のおすすめや OxLint/Oxfmt の設定をしてくれるようです。VSCode を選択しました。

Gitリポジトリを作成するか選択します。Yes を選択しました。

pre-commit でフォーマット、リントチェック、型チェックを自動適用するか選択します。Yes を選択しました。

プロジェクトが作成できました。

生成された package.json は次のようになっています。
開発・ビルド・Previewが vp コマンドに統一されていることが分かります。

  ～
  "scripts": {
    "dev": "vp dev",
    "build": "tsc && vp build",
    "preview": "vp preview",
    "prepare": "vp config"
  },
  ～

TypeScript 7へアップデート

v0.2.5 時点では、TypeScript6 がインストールされました。
TypeScript 7 （最新版）にアップデートするには、

vp update typescript@latest

を実行します。このように依存関係の管理も vp コマンドを通して実行できます。
依存関係管理のマニュアルは https://viteplus.dev/guide/install です。

`vp check` : 静的チェック

VITE+では vp check コマンドで、

Formatter
Lint
Type Check

をまとめて実行できます。

Scaffoldingで自動作成された vite.config.ts は以下のようになっています。

import { defineConfig } from "vite-plus";

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

Lintルールは1つ、Formatterルールは未設定です。

Lintルールを追加

今回は次のルールを追加しました。

functionではなくアロー関数を使用 (func-style)
コールバックもアロー関数 (prefer-arrow-callback)

  lint: {
    jsPlugins: [{ name: 'vite-plus', specifier: 'vite-plus/oxlint-plugin' }],
    rules: {
      'vite-plus/prefer-vite-plus-imports': 'error',
      'func-style': ['error', 'expression'],
      'prefer-arrow-callback': 'error',
    },
    options: { typeAware: true, typeCheck: true },
  },

Oxlintのルール一覧：
https://oxc.rs/docs/guide/usage/linter/rules.html

Formatterルールを追加

Formatterでは

セミコロンなし
シングルクォート
import並び替え

を追加します。

  fmt: {
    semi: false,
    singleQuote: true,
    sortImports: true,
  },

Oxfmtのルール：
https://oxc.rs/docs/guide/usage/formatter/config.html

修正後の vite.config.ts は以下のようになっています。

import { defineConfig } from "vite-plus";

export default defineConfig({
  staged: {
    "*": "vp check --fix",
  },
  fmt: {
    semi: false,
    singleQuote: true,
    sortImports: true,
  },
  lint: {
    jsPlugins: [{ name: "vite-plus", specifier: "vite-plus/oxlint-plugin" }],
    rules: {
      "vite-plus/prefer-vite-plus-imports": "error",
      "func-style": ["error", "expression"],
      "prefer-arrow-callback": "error",
    },
    options: { typeAware: true, typeCheck: true },
  },
});

この状態で vp check を実行すると Formatter のエラーが出ます。Scaffolding で自動作成されたコードにセミコロンやダブルクォートがあるためです。

vp check

メッセージにあるように vp check --fix で Formatter の修正を反映させます。
フォーマットが効いて Formatter のエラーは消えましたが、Lintのエラーが出ます。

vp check --fix

Scaffolding で自動作成されたサンプルコードの関数宣言をアロー関数に修正します。

修正前

export function setupCounter(element: HTMLButtonElement) {
  let counter = 0;
  const setCounter = (count: number) => {
    counter = count;
    element.innerHTML = `Count is ${counter}`;
  };
  element.addEventListener("click", () => setCounter(counter + 1));
  setCounter(0);
}

修正後

export const setupCounter = (element: HTMLButtonElement) => {
  let counter = 0
  const setCounter = (count: number) => {
    counter = count
    element.innerHTML = `Count is ${counter}`
  }
  element.addEventListener('click', () => setCounter(counter + 1))
  setCounter(0)
}

Lintのエラーも対応したので、vp check をもう一度実行します。

vp check

Lintエラーも無くなりました。

`vp test` : テスト

プロジェクト作成時に AGENTS.md が生成されています。
このファイルにはAIエージェント向けの開発ルールが記載されています。

例えば

vp install
vp check
vp test

を実行することなどが書かれています。

今回は AGENTS.md に次のルールを追加しました。
テストコードをCo-location（実装コードと同じフォルダにテストコードを配置）させるルールです。

# Test code location

- Place test files in the same directory as the implementation code (e.g., `foo.ts` and `foo.test.ts`).

ClaudeCodeにテストコードを生成させます。

テストコードを作成してください。

作成されたテストコードは以下です。

counter.test.ts

import { beforeEach, describe, expect, it } from 'vite-plus/test'

import { setupCounter } from './counter.ts'

describe('setupCounter', () => {
  let button: HTMLButtonElement

  beforeEach(() => {
    button = document.createElement('button')
  })

  it('initializes the button with a count of 0', () => {
    setupCounter(button)

    expect(button.innerHTML).toBe('Count is 0')
  })

  it('increments the count on each click', () => {
    setupCounter(button)

    button.click()
    expect(button.innerHTML).toBe('Count is 1')

    button.click()
    expect(button.innerHTML).toBe('Count is 2')
  })

  it('tracks separate counters for separate buttons', () => {
    const otherButton = document.createElement('button')
    setupCounter(button)
    setupCounter(otherButton)

    button.click()
    button.click()
    otherButton.click()

    expect(button.innerHTML).toBe('Count is 2')
    expect(otherButton.innerHTML).toBe('Count is 1')
  })
})

counter.ts に対して以下のテストが3件作成されました。

ボタンのラベルがCount is 0であること
ボタンを1回クリックするとラベルがCount is 1、2回クリックするとラベルがCount is 2であること
ボタン、その他ボタンの2つを作成し、ボタンを2回クリック、その他ボタンを1回クリックで、それぞれCount is 2、Count is 1であること

vp test コマンドでテストを実行します。

vp test

3件のテストが通っています。

vp dev : デバッグ実行

vite開発サーバーは以下のコマンドで起動します。
http://localhost:5173 でアクセスできます。

vp dev

vp build : リリースビルド

リリースビルドは以下のコマンドです。
dist\ フォルダに出力されます。

vp build

vp preview : リリースビルド動作確認

dist\ フォルダに出力されたモジュールの動作確認は以下のコマンドです。
http://localhost:4173 でアクセスできます。

vp preview

まとめ

VITE+を触ってみました。開発に必要な操作が vp コマンドへ集約されているため学習効率が高いことと、Lint・Formatter設定も vite.config.ts にまとめられるので、ファイル数が少なくなりVSCodeのEXPLORERが見やすくなるので開発効率も上がりそうでした。

使用したコマンドを振り返ります。

コマンド	用途
vp create	プロジェクト作成
vp update	ライブラリアップデート
vp check	静的チェック(Lint、フォーマット、型チェック
vp test	テスト
vp dev	デバッグ実行
vp build	リリースビルド
vp preview	リリースビルド動作確認

Vite単体では、フォーマッタやLint、テストなどは別々のツールを組み合わせることが一般的ですが、VITE+ではそれらを最初から一つのCLIにまとめて提供している点が大きな特徴です。

まだ v0.2.5 と初期段階のプロジェクトですが、「Web開発の統一ツールチェーン」を目指す今後の発展にも期待したいところです。