use-vp-config

@liangmi/vp-config の使い方

@liangmi/vp-config は、vite.config.ts で使用する liangmi() という関数を1つエクスポートします。この関数はコミット済みのファイル（package.json、tsconfig.json、index.html、ワークスペースマニフェスト）を読み取り、各パッケージの種類を判定して、lint、fmt、pack、test、run、staged 用の Vite+ 設定を生成します。ユーザー設定はその上にマージされます。

そのため、設定を書くこと自体は作業の大半ではありません。コミット済みのファイルにプロジェクトの情報を正しく記述し、プリセットと異なる設定だけを書くのが主な作業です。

[email protected] 以降が必要です。Vite+ のドキュメントは node_modules/vite-plus/docs または https://viteplus.dev/guide/ をご覧ください。

プロジェクトの判定方法

各プロジェクトには特性が付与されます。各特性は、コミット済みのファイルから判定されます。

特性	判定元	変更内容
lib	package.json の exports	pack：tsgo による .d.ts、固定拡張子、調整された exports
cli	package.json の bin	pack：Node ターゲット、圧縮。lint：console、process.exit を許可
node	package.json の bin、または tsconfig の types にある "node"	lint：Node のグローバル変数とルール。test：node 環境
browser	package.json と同じディレクトリにある index.html、または tsconfig の lib にある DOM	lint：ブラウザー向けルール。test：インストール済みの場合は happy-dom／jsdom
react、vue、tailwindcss	package.json の依存関係フィールドのいずれか	lint：コンポーネント向けルール。fmt：JSX の引用符、クラスの並べ替え

node と browser は独立しています。プロジェクトには両方がある場合も、どちらもない場合もあります（どちらもない場合、test 環境とランタイムルールは設定されません）。

特性が正しくない場合は、まず元のファイルを修正してください。たとえば、tsconfig.json に "types": ["node"] を追加したり、package.json に exports または bin を追加したりします。vp pack が exports や bin を生成することはないため、いずれにしてもコミットが必要です。ファイルの修正が現実的でない場合に限り、.option() を使用してください（API を参照）。

読み込まれるのはプロジェクトディレクトリ内の tsconfig.json だけです（extends の継承先も読み込まれます）。tsconfig.app.json などにしか設定されていない項目は認識されません。

設定を記述する場所

Vite+ がワークスペースルートから読み込むのは lint と fmt だけです。プリセットもこれに従います。

vite.config.ts の場所	生成される設定
単一パッケージのリポジトリ	すべて
ワークスペースルート	lint、fmt、staged、run。各メンバーにプロジェクト別の上書きを適用
ワークスペースメンバー	そのメンバーの pack、test、run

pnpm-workspace.yaml または package.json の workspaces があるディレクトリがワークスペースルートです。ルートの設定とすべてのメンバーの設定で liangmi() を使用してください。

メンバーの設定で lint または fmt を渡すか、そこで lint のメソッドを連結すると、エラーが発生します。メンバー固有の lint と fmt の変更はルートの設定に記述し、files の glob はワークスペースルートからの相対パスにしてください（たとえば packages/cli/**）。

既存のプロジェクトを移行する

1. まず Vite+ を導入します。 プロジェクトでまだ Vite+ を使用していない場合は、ワークスペースのルートで vp migrate を実行し、node_modules/vite-plus/docs/guide/migrate.md の手順に従います。ESLint、Prettier、tsup、Vitest の設定を手作業で移植しないでください。Vite+ が処理します。
2. ワークスペースのルートで インストール します：vp add -D @liangmi/vp-config。メンバーからはルートにあるパッケージが解決されます。ワークスペースで pnpm カタログを使用している場合は、設定をそろえるため、そこに追加してください。
3. 上の表を基に、各プロジェクトの 事実を確認 します。誤っている、または不足している場合は、package.json と tsconfig.json を修正してください。パッケージをライブラリとして公開するかどうかなど、意図が不明な場合はユーザーに確認してください。
4. 各 vite.config.ts を liangmi() を使うように 書き換えます。プリセットがすでにカバーしている内容は記述しないでください。
   • pack.entry は自動的に導出されません。すべての lib または cli プロジェクトで設定してください。
   • プリセットがすでに設定している fmt オプション、lint ルール、test.environment、pack のデフォルト設定を削除します。実際に異なるオプションは残し、どのオプションを残したかユーザーに伝えてください。
   • 既存の lint オブジェクトはトップレベルオブジェクトではなく、フラット設定のエントリーに変換してください（Lint を参照）。
   • vite、server、plugins、その他のアプリ設定は変更せずに残します。liangmi() はこれらを引き継ぎます。
5. スクリプトをキャッシュタスクに 更新 します。例："build": "vp run cpack"、"test": "vp run ctest"、"check": "vp run ccheck"。コミットフックをインストールするため、"prepare": "vp config" を追加します。lint の型チェックでカバーされるため、tsc --noEmit の個別の手順は削除してください。
6. vp check を実行 し、報告された問題を修正します。Lint エラーの修正 を参照してください。
7. vp test を実行 し、該当するプロジェクトでは vp pack / vp build も実行します。

新しいプロジェクトを作成する

1. vp create（vite:library、vite:application、vite:monorepo、またはフレームワークのテンプレート）でひな形を作成します。判断に迷った場合は、node_modules/vite-plus/docs/guide/create.md をお読みください。
2. 移行手順の 2～7 に従います。新しいプロジェクトでは、ひな形の作成時に各事実を設定します。ライブラリには exports、CLI には bin、Node コードには types: ["node"]、ブラウザーコードには lib: ["DOM", ...] を設定します。

API

import { liangmi } from '@liangmi/vp-config'

export default liangmi({
  pack: { entry: ['./src/index.ts'] }
})

• liangmi(config) は Vite+ の defineConfig と同じ入力を受け取ります。入力はオブジェクト、プロミス、または ConfigEnv を引数とする関数です。すでに defineConfig を呼び出しているため、再度ラップしないでください。
• チェーン可能なビルダーを直接エクスポートします。Vite+ は設定の読み込み時にこれを解決します。
• fmt、pack、run、staged、test はプリセットに対してディープマージされます。lint はフラット設定の配列で、プリセットの後に追加されます。
• .only([...parts]) は、指定したプリセットパーツのみを保持します。.exclude([...parts])は指定したパーツを除外します。パーツはfmt、lint、pack、run、staged、test` です。除外したパーツのユーザー設定は引き続き適用されますが、その下にプリセットは適用されません。
• .option([{ path, ...traits }]) は、ルート設定で特性を宣言します。path はワークスペースのルートからの相対パスです（ルートには '.' を指定します）。宣言された特性は検出結果より優先され、宣言されていない特性は引き続き検出されます。ワークスペースのメンバーではないパスは、追加のプロジェクトとして追加されます。メンバー内で .option() を呼び出すとエラーになります。メンバーはプリセットを導出する前に、宣言を読み取るためにルート設定モジュールを読み込みます。

export default liangmi().option([
  { path: 'apps/api', node: true },
  { path: 'packages/ui', browser: true, vue: true }
])

エクスポートされる型は LiangmiConfig、UserConfigFunction、ConfigPart、DeclaredProject、ProjectFacts、ProjectTraits です。

Lint

lint は oxlint-flat-config の ESLint スタイルのフラット設定配列です。後のエントリーが前のエントリーを上書きし、ディープマージは行われません。

export default liangmi({
  lint: [
    { rules: { 'no-console': 'warn' } },
    { files: ['packages/cli/**'], rules: { 'no-console': 'off' } }
  ]
})

新しいエントリーを追加するのではなく、プリセットのエントリーを変更するには、liangmi() にコンポーザーメソッドをチェーンします。使用できるメソッドは、override、replace、remove、insertBefore、insertAfter、append、prepend、overrideRules、removeRules です。これらはユーザーエントリーが追加された後に実行されます。

export default liangmi()
  .override('liangmi/options', { options: { typeCheck: false } })
  .remove('liangmi/style')

プリセットエントリー名：

• liangmi/ignores、liangmi/options
• liangmi/correctness、liangmi/perf、liangmi/suspicious、liangmi/nursery：カテゴリ全体。ルール名は eslint/no-shadow のようにプラグイン名が接頭辞に付きます
• liangmi/restriction、liangmi/pedantic、liangmi/style：選択されたルール。ほとんどは no-console のように接頭辞が付きません
• 特性ごと：liangmi/node、liangmi/browser、liangmi/cli、liangmi/react、liangmi/vue
• ファイルの役割ごと：liangmi/test、liangmi/script、liangmi/config-file

ワークスペースでは、メンバーのエントリーに liangmi/packages/cli/react のようなパスが含まれます。overrideRules と removeRules は、記述どおりのルール名に完全一致します。そのため、ルールを定義しているエントリーの表記を使用してください。表記を確認するには、node_modules/@liangmi/vp-config/dist/index.mjs を検索します。

Lint エラーの修正

このプリセットは厳格で、denyWarnings が有効になっているため、警告も失敗扱いになります。移行時には通常、新しいレポートが大量に発生します。まずコードを修正してください。ユーザーに確認せず、ルールをまとめて無効にしないでください。

• 多くのレポートは自動修正できます。まず vp check --fix を実行し、残りを手動で修正してください。
• 相対インポートにはファイル拡張子が必要です（./util.ts）。TypeScript プロジェクトでは、allowImportingTsExtensions（noEmit と併用）または tsconfig.json の rewriteRelativeImportExtensions が必要です。
• クラスはエラーになります（max-classes-per-file: 0）。関数とプレーンオブジェクトを優先してください。
• cli プロジェクトとスクリプトファイルを除き、console はエラーになります。**/*.config.ts ファイルではデフォルトエクスポートが許可されますが、console は許可されません。
• テストファイルの名前は *.test.ts にする必要があります。*.spec.ts ファイルはテストとして lint されますが、ファイル名について報告されます。
• ファイルの役割は各プロジェクト内で適用されます。scripts/**、script/**、およびトップレベルの *.ts ／ *.js ファイルは Node スクリプトです。
• bin/** は無視されます。
• oxlint-disable コメントのみが有効です。eslint-disable コメントは無視されるため、既存のものは変換してください。未使用の無効化コメントは報告されます。無効化が妥当な場合は、// oxlint-disable-next-line <rule> -- <reason> を使用してください。
• 型チェックは lint の実行時に行われます。型エラーは vp check に表示されます。

結果の確認

解決済みの設定を出力して、検出された特性を確認してください。

node -e "const c = (await import('./vite.config.ts')).default; console.log(JSON.stringify(c, null, 2))"

確認したい設定ファイルのディレクトリで実行してください。Node 22.18+ では、TypeScript の設定ファイルを直接インポートできます。設定が関数の場合は、c の代わりに await c({ command: 'build', mode: 'production' }) を使用してください。lint.overrides に想定される liangmi/<path>/<trait> エントリーが含まれていること、test.environment が正しいこと、また pack に lib または cli のデフォルト設定があることを確認してください。

キャッシュされたタスク

各設定には、次のタスクが追加されます。vp run <task>（または vpr <task>）で実行してください。

Task	実行内容
cbuild	vp build
cpack	vp pack
clint	vp lint
cfmt	vp fmt
cformat	vp format
ccheck	vp check
ctest	vp test

Vite+ のタスクキャッシュが適用されるよう、package.json のスクリプトでこれらを使用してください。キャッシュの入力は run.tasks.<name>.cache で変更できます。ルート設定では、ステージされたファイルに対して vp check --fix を実行するよう staged も設定されています。