Visual Studio Code拡張機能でサイドバーにコマンドボタンを設置する方法

Visual Studio Code（VSCode）拡張機能開発で、サイドバーに独自のボタンを設置してユーザーがクリック可能なUIを作る方法を解説します。特別なHTML描画なしに手軽に実装できる「ビューコンテナ定義」と「viewsWelcomeによるコマンドリンク表示」の二段階構成について、package.jsonの設定例も交えてわかりやすく紹介します。

サイドバーにコマンドボタンを設置する

package.jsonでカスタムビューコンテナとビューを定義する

まずはVSCodeのサイドバーに自分用のコンテナ（エリア）を作り、その領域内に表示するビューを登録します。
以下の例では「sample-sidebar」というコンテナの中に「sample-view」というビューを作成しています。

  "contributes": {
    "commands": [
      {
        "command": "test.helloWorld",
        "title": "Hello World"
      }
    ],
    "viewsContainers": {
      "activitybar": [
        {
          "id": "sample-sidebar",
          "title": "サンプルサイドバー",
          "icon": "resources/icon.svg"
        }
      ]
    },
    "views": {
      "sample-sidebar": [
        {
          "id": "sample-view",
          "name": "サンプルビュー"
        }
      ]
    },
  },

• viewsContainers.activitybar：サイドバーに新しいコンテナを追加（IDとタイトル、アイコンを設定）
• views：上で作ったコンテナの中に配置するビューを登録する

これでVSCodeのUIに「サンプルサイドバー」が表示され、その中に「サンプルビュー」が表示されるようになります。
※activitybarのiconをいれないとサイドバーに表示されないので、注意です。

viewsWelcomeでビュー内にコマンドリンク形式のボタンを表示する

新規に作ったビューがまだ何も表示していない状態に対してクリック可能なボタンを設置する機能がviewsWelcomeです。Markdown風の書き方でコマンドリンクを埋め込めます。

  "contributes": {
    "commands": [
      {
        "command": "test.helloWorld",
        "title": "Hello World"
      },
      {
        "command": "sample.command",
        "title": "サンプルコマンド"
      }
    ],
    "viewsContainers": {
      "activitybar": [
        {
          "id": "sample-sidebar",
          "title": "サンプルサイドバー",
          "icon": "resources/icon.svg"
        }
      ]
    },
    "views": {
      "sample-sidebar": [
        {
          "id": "sample-view",
          "name": "サンプルビュー"
        }
      ]
    },
    
    "viewsWelcome": [
      {
        "view": "sample-view",
        "contents": "ボタンを設置できます [コマンド実行](command:sample.command)",
        "when": "true"
      }
    ]
  },

• viewsWelcome.viewに対象ビューIDを指定
• contentsにはMarkdownのリンク形式でcommand:スキームのコマンドIDを記述
• whenは表示条件（常に表示するなら"true"）
• commandsで実際に動作するコマンドを定義する

コマンドの登録と実装（extension.ts）

クリックされたときに実行されるコマンドはTypeScript（Node.js）コードで登録し、任意処理を実装します。

export function activate(context: vscode.ExtensionContext) {
   ・
   ・ 省略
   ・
context.subscriptions.push(
 vscode.commands.registerCommand('sample.command', () => {
  vscode.window.showInformationMessage('サイドバーのボタンが押されました');
 })
 );
   ・
   ・ 省略
   ・
}

これでビュー内のリンクボタンをクリックするとメッセージが表示されるようになります。

実装のポイントと注意点

• package.jsonのID（ビューコンテナ・ビュー・コマンド）はすべて一致させることが重要
• viewsWelcomeは空のビューや初回表示での説明的UIに適している
• ボタンの見た目はMarkdownリンクのため基本的にシンプルだが、手軽に設置できる
• 複数ボタンや複雑なUIが必要ならTreeViewまたはWebviewViewの活用を検討する
• アイコンはわかりやすく、タイトルもユーザー視点で丁寧に設定すること

まとめ

VSCode拡張機能でサイドバーにボタンを設置する流れは、

1. package.jsonでビューコンテナとビューを作成し
2. viewsWelcomeでビュー内にMarkdown風のコマンドリンクボタンを設置し
3. コマンド登録で処理を実装する

という3ステップで簡単に実現可能です。
HTMLベースの複雑なUIなしにクリック可能なボタンが手軽に設置できるため、独自の便利なサイドバーを作りたい拡張開発の入門として最適な方法です。ぜひ実装に挑戦してみてください。

以上、Visual Studio Code拡張機能のサイドバーにコマンドボタンを設置する基本的な方法の解説でした。