VSCode拡張を自作する。~ activitybarにオリジナルのアイコンを表示する。~

はじめに

---

activitybarに自作拡張機能のアイコンを表示するところで躓いたので、備忘録として残しておきます。

activitybarってどこ?

---

今回対象になっている『activitybar』は下記の写真のオレンジ色の部分です。
Exploer, Docker拡張といったアイコンが表示されている場所のことを指します。

ここに自作のアイコンを表示させていきます。

(VSCodeのUI各部名称が分からないという方は公式サイトを確認しましょう!!)

activitybarにビューコンテナを登録する

---

まず、activitybarに自作のアイコンを表示させるためには、ビューコンテナに自作のアイコンの設定を登録する必要があります。
登録するために、contributes.viewsContainers.activitybarに対して、コンテナの登録を行います。

設定が必要なプロパティは下の3つです。

• id : 作成するコンテナの識別子
• title : 表示される名前
• icon : 設定するアイコン(package.jsonを基準とする相対パスになります。)

// package.json
{
  "contributes": {
    "viewsContainers": {
      "activitybar": [
        {
          "id": "sample-container",
          "title": "Sample",
          "icon": "./logo.svg"
        }
      ]
    }
  }
}

idは、Viewに対してコンテナを登録する際に使用します。
titleはViewに描画された際、アイコンに対してマウスカーソルをhoverさせると画面に表示されたりします。
iconとして表示されるイメージは、50×40四方のブロックの中央に、24×24のサイズで描画されます。推奨ファイルは.svgですが、画像ファイルの種類は問いません。
(画像ファイルの種類は問わない。そうですが、私は.svg以外で試したことはありません。)

これで、コンテナの登録が完了です。
次は登録したコンテナをViewに表示させる作業です。

viewsに自作のコンテナを登録する

---

コンテナの登録はcontributes.viewsに対して行います。
先に登録済みの、package.jsonを載せておきます。

// package.json
{
  "contributes": {
    "views": {
      /* ここで先ほど登録したコンテナのidを指定する。 */
      "sample-container": [
        // viewの登録はObject配列になっているため、複数登録可能。
        {
          "id": "custom-container-id-1",
          "name": "custom-container-id-1-name"
        }
      ]
    },
    "viewsContainers": {
      "activitybar": [
        {
          "id": "sample-container",
          "title": "Sample",
          "icon": "./logo.svg"
        }
      ]
    }
  }
}

contributes.viewsには、すでに組み込みとして"explorer", "debug", "scm"などが用意されていますが、今回は自作のコンテナなので先ほど登録したidを使用します。
コンテナを設定したら、次にコンテナ起動時(アイコンクリック時)に表示されるviewを定義していきます。
ここで、必須にとなるプロパティはid, nameです。

• id : view識別子
• name : 表示名
• type : (省略可)treeとwebviewのどちからを選択可
• icon : (省略可)このアイコンは、Viewの名前が表示できない場合に代わりに表示されます。
• visibility : (省略可)collapsed, visible, hiddenから選択できます。(ただし、これは初期設定で、その後はユーザー設定に依存する。)
• when : (省略可)viewの表示条件を設定できます。
• contextualTitle : (省略可)viewがデフォルトのビューコンテナから移動され、追加のコンテキストが必要な場合に使用されます

Jsonの構造からわかる通り、view定義はコンテナの配下に複数定義することができます。

↑でアイコンの設定は完了しているため、これをDebugすると自作アイコンと登録したviewが表示されます。

実験として、viewを2つ定義した場合も見てみましょう。

// package.json
{
  "contributes": {
    "views": {
      "sample-container": [
        // view 1つ目
        {
          "id": "custom-container-id-1",
          "name": "custom-container-id-1-name"
        },
        // view 2つ目
        {
          "id": "custom-container-id-2",
          "name": "custom-container-id-2-name"
        }
      ]
    },
    "viewsContainers": {
      "activitybar": [
        {
          "id": "sample-container",
          "title": "Sample",
          "icon": "./logo.svg"
        }
      ]
    }
  }
}

↑の状態で、Debugを開始すると2つのViewを確認することができます。

これで自作アイコンの表示は完了です。
ただ、あくまでも『自作アイコンの表示』までなので、この状態では何の機能もありません。ただ、『アイコンをクリックできるだけ。』の状態です。
実際に使えるものにしていくためには、viewに応じた機能をactivateする必要があります。

まとめ

---

• contributes.viewsContainers.activitybarに対して自作コンテナを登録する。
• 自作のコンテナをcontributes.viewsに登録する。
• コンテナを登録する際、viewは複数定義が可能。