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('サイドバーのボタンが押されました');
	})
	);
   ・
   ・ 省略
   ・
}

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