vscode-extension-builder-lawvable

VS Code 拡張機能

VS Code 拡張機能をゼロから構築したり、既存のウェブアプリをポータブルで共有可能な拡張機能に変換したりできます。

アーキテクチャ

VS Code 拡張機能は、次の 2 つのコンテキストで実行されます。

1. 拡張機能ホスト（Node.js） — バックエンドロジック、ファイルアクセス、VS Code API
2. Webview（ブラウザーのサンドボックス） — HTML/CSS/JS によるカスタム UI（React、Vue、バニラ）

ビルドスタック：TypeScript + esbuild（拡張機能）+ Vite（Webview）

クイックスタート

1. 必要に応じて assets/ からテンプレートを選択します（以下の判断ツリーを参照）
2. テンプレートをプロジェクトディレクトリにコピーします
3. package.json の name、displayName、publisher、description を更新します
4. npm install を実行し、その後 npm run build を実行します
5. VS Code で F5 を押して、拡張機能開発ホストを起動します

テンプレートの判断ツリー

必要な機能	テンプレート
シンプルなコマンド／アクション	assets/basic-command/
カスタム UI パネル（React）	assets/webview-react/
サイドバーのファイルツリー	assets/tree-view/
カスタムファイルエディター	assets/custom-editor/
AI エージェントとの統合	assets/file-bridge/

拡張機能の種類

コマンド

コマンドパレット、キーボードショートカット、またはメニューから実行されるアクションを登録します。

vscode.commands.registerCommand('myExt.doSomething', () => {
  vscode.window.showInformationMessage('Done!');
});

一般的な API については、references/api-reference.md を参照してください。

Webview

パネルまたはサイドバーに、HTML/CSS/JS による完全な UI を表示します。複雑なインターフェースには React を使用してください。

const panel = vscode.window.createWebviewPanel(
  'myView', 'My Panel', vscode.ViewColumn.One,
  { enableScripts: true }
);
panel.webview.html = getWebviewContent();

React のセットアップ、メッセージング、CSP については、references/webview-patterns.md を参照してください。

ツリービュー

サイドバーに階層データ（ファイルエクスプローラー、アウトライン、リスト）を表示します。

vscode.window.registerTreeDataProvider('myTreeView', new MyTreeProvider());

TreeDataProvider のパターンについては、references/tree-view-patterns.md を参照してください。

カスタムエディター

特定のファイルタイプに対して、デフォルトのエディターを置き換えます。

vscode.window.registerCustomEditorProvider('myExt.myEditor', new MyEditorProvider());

ドキュメントの同期と元に戻す／やり直しについては、references/custom-editor-patterns.md を参照してください。

既存アプリの変換

JS/React/Vue アプリを拡張機能に変換するには、次の手順を実行します。

1. 評価 — アプリは何をしますか？どの VS Code 機能が必要ですか？
2. API の対応付け — Web API を VS Code の同等の API に置き換えます
3. 再構成 — UI を Webview に、ロジックを拡張機能ホストに移します
4. 接続 — postMessage による通信を接続します

Web API	VS Code の同等機能
localStorage	context.globalState / context.workspaceState
fetch()	vscode.workspace.fs、または外部 API には fetch を引き続き使用
Router	複数の Webview パネルまたはサイドバービュー
alert()	vscode.window.showInformationMessage()
prompt()	vscode.window.showInputBox()
confirm()	オプション付きの vscode.window.showWarningMessage()

詳しい手順については、references/conversion-guide.md を参照してください。

ビルドシステム

拡張機能のコード — esbuild を使用します（高速でシンプルです）。

// esbuild.js
esbuild.build({
  entryPoints: ['src/extension.ts'],
  bundle: true,
  outfile: 'dist/extension.js',
  external: ['vscode'],
  format: 'cjs',
  platform: 'node',
});

Webview のコード — Vite を使用します（HMR、React をサポート）。

// vite.config.ts
export default defineConfig({
  build: {
    outDir: '../dist/webview',
    rollupOptions: { output: { entryFileNames: '[name].js' } }
  }
});

完全な設定については、references/build-config.md を参照してください。

package.json マニフェスト

必須フィールド：

{
  "name": "my-extension",
  "displayName": "My Extension",
  "publisher": "your-publisher-id",
  "version": "0.0.1",
  "engines": { "vscode": "^1.85.0" },
  "main": "./dist/extension.js",
  "activationEvents": [],
  "contributes": {
    "commands": [{ "command": "myExt.hello", "title": "Hello" }]
  }
}

contributes セクションでは、コマンド、メニュー、ビュー、設定、キーバインドなどを定義します。

すべての貢献ポイントについては、references/contribution-points.md を参照してください。

IPC パターン

拡張機能 ↔ Webview

双方向通信には postMessage を使用します。

// Extension → Webview
panel.webview.postMessage({ type: 'update', data: {...} });

// Webview → Extension
panel.webview.onDidReceiveMessage(msg => {
  if (msg.type === 'save') { /* handle */ }
});

拡張機能 ↔ 外部ツール（AI エージェント）

Claude Code やその他のエージェントとの通信には、ファイルベースの IPC を使用します。

// Watch for command files
fs.watch(commandDir, (event, filename) => {
  if (filename.endsWith('.json')) {
    const command = JSON.parse(fs.readFileSync(path.join(commandDir, filename)));
    processCommand(command);
  }
});

ファイルブリッジパターンについては、references/ai-integration.md を参照してください。

パッケージ化と配布

.vsix としてパッケージ化

npm install -g @vscode/vsce
vsce package

これにより my-extension-0.0.1.vsix が作成されます。

.vscodeignore

不要なファイルを除外します。

.vscode/**
node_modules/**
src/**
*.ts
tsconfig.json
esbuild.js
vite.config.ts

配布方法

1. 直接共有 — .vsix ファイルを送り、code --install-extension file.vsix でインストールします
2. VS Marketplace — vsce publish で公開します（Microsoft アカウントが必要です）
3. Open VSX — オープンソース拡張機能向けの代替レジストリ

プラットフォーム固有のビルド

ネイティブ依存関係を持つ拡張機能の場合：

vsce package --target win32-x64
vsce package --target darwin-arm64
vsce package --target linux-x64

参考ファイル

ファイル	読むタイミング
api-reference.md	拡張機能の機能を実装するとき
contribution-points.md	package.json の contributes を設定するとき
webview-patterns.md	React webview を構築するとき
tree-view-patterns.md	ツリービューを実装するとき
custom-editor-patterns.md	カスタムファイルエディターを構築するとき
build-config.md	esbuild/Vite を設定するとき
conversion-guide.md	Web アプリを変換するとき
ai-integration.md	AI エージェントと統合するとき

アセットテンプレート

テンプレート	説明
basic-command/	1 つのコマンドを持つ最小限の拡張機能
webview-react/	メッセージング機能付きの React webview パネル
tree-view/	プロバイダー付きのサイドバーツリービュー
custom-editor/	特定のファイル形式向けのカスタムエディター
file-bridge/	AI エージェント向けのファイルベース IPC