0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kouki_miura

VITE+入門｜開発・Lint・Format・Test・Buildをvpコマンドに統一

0
Posted at

医療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 を選択しました。

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

生成された 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

image.png

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

vp check --fix

image.png

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

image.png

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

image.png

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開発の統一ツールチェーン」を目指す今後の発展にも期待したいところです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?