VS Code 拡張機能開発ガイド

VS Code 拡張機能ガイド

VS Code 拡張機能を作成、開発、公開します。

使用タイミング

• VS Code 拡張機能、拡張機能開発、vscode プラグイン
• ゼロから新しい VS Code 拡張機能を作成する場合
• 拡張機能にコマンド、キーバインド、設定を追加する場合
• VS Code マーケットプレイスに公開する場合

クイックスタート

# 新しい拡張機能をスキャフォールディング（推奨）
npm install -g yo generator-code
yo code

# または最小限の手動セットアップ
mkdir my-extension && cd my-extension
npm init -y && npm install -D typescript @types/vscode

プロジェクト構造

my-extension/
├── package.json          # 拡張機能マニフェスト（重要）
├── src/extension.ts      # エントリポイント
├── out/                  # コンパイル済みJS（gitignore）
├── images/icon.png       # マーケットプレイス用 128x128 PNG
└── .vscodeignore         # VSIX から除外するファイル

ビルドとパッケージング

npm run compile      # 一度ビルド
npm run watch        # ウォッチモード（F5 でデバッグ起動）
npx @vscode/vsce package   # .vsix を作成

完了条件

• 拡張機能がエラーなくアクティブ化される
• すべてのコマンドが登録され、動作する
• パッケージサイズが5MB未満（.vscodeignore を使用）
• README.md にマーケットプレイス/GitHub リンクが含まれている

クイックトラブルシューティング

症状	修正方法
拡張機能が読み込まれない	activationEvents を確認（VS Code 1.74 以降、コマンド/ビューがコントリビュートされていれば自動検出）
コマンドが見つからない	package.json とコード内のコマンドIDを一致させる
ショートカットが機能しない	when 句を削除し、競合を確認

リファレンス

トピック	参照先
AI カスタマイズ	references/ai-customization.md
コードレビュープロンプト	references/code-review-prompts.md
コードサンプル	references/code-samples.md
TreeView	references/treeview.md
Webview	references/webview.md
テスト	references/testing.md
公開	references/publishing.md
トラブルシューティング	references/troubleshooting.md

ベストプラクティス

命名の一貫性

公開前に、パッケージ名、設定キー、コマンドID、ビューIDを統一します：

項目	例
パッケージ名	copilot-scheduler
設定キー	copilotScheduler.enabled
コマンドID	copilotScheduler.createTask
ビューID	copilotSchedulerTasks

一元化された通知処理

type NotificationMode = "sound" | "silentToast" | "silentStatus";

function getNotificationMode(): NotificationMode {
  const config = vscode.workspace.getConfiguration("myExtension");
  return config.get<NotificationMode>("notificationMode", "sound");
}

function notifyInfo(message: string, timeoutMs = 4000): void {
  const mode = getNotificationMode();
  switch (mode) {
    case "silentStatus":
      vscode.window.setStatusBarMessage(message, timeoutMs);
      break;
    case "silentToast":
      void vscode.window.withProgress(
        { location: vscode.ProgressLocation.Notification, title: message },
        async () => {},
      );
      break;
    default:
      void vscode.window.showInformationMessage(message);
  }
}

function notifyError(message: string, timeoutMs = 6000): void {
  const mode = getNotificationMode();
  if (mode === "silentStatus") {
    vscode.window.setStatusBarMessage(`⚠ ${message}`, timeoutMs);
    console.error(message);
    return;
  }
  void vscode.window.showErrorMessage(message);
}

ユーザーが通知の配信方法を制御できるように、notificationMode 設定を公開します。