VSCode拡張を自作する。~ viewに対するtitle menuの設定 ~

はじめに

はじめに
commandの設定
menuの登録
おまけ
まとめ
関連記事

これは前回の『VSCode拡張を自作する。~ activitybarにオリジナルのアイコンを表示する。~』の続きというか、おまけ記事になります。
activitybarにオリジナルアイコンを設定する方法や、一連の作り方を知りたい方は以前の記事から読んでみてください!

`command`の設定

今回は前回記事を参考に、予めactivitybarにオリジナルアイコンを表示させ、viewの表示ができるところまで用意してあります。
今日はここから、タイトル通りviewにmenuを追加していきます。
(contributesは以下の通り。)

// package.json "contributes"部分のみ抜粋
{
  "contributes": {
    "views": {
      "sample-container": [
        {
          "id": "custom-container-id-1",
          "name": "Custom view1"
        },
        {
          "id": "custom-container-id-2",
          "name": "Custom view2"
        }
      ]
    },
    "viewsContainers": {
      "activitybar": [
        {
          "id": "sample-container",
          "title": "Sample",
          "icon": "./logo.svg"
        }
      ]
    }
  }
}

まずは、commandsを設定していきます。
commandsも今までと同様に、"contributes"の中に設定していきます。
設定項目は下記の通りです。

command : 登録するコマンドの識別子
title : UI上で表示されるコマンド名
icon : (省略可) アイコンでコマンドを表現したい場合に設定します。
category : (省略可) アイコンをカテゴリ分けすることができます。(コマンドパレットにGo: Install/Update Toolsと表示される場合のGoの部分に当たります。)
enablement : (省略可)コマンドを有効にします。

今回は、view titleにReloadボタンを表示させたいので、iconまで設定します。

{
  "contributes": {
    // ↓↓ 今回設定部分 ↓↓
    "commands" :[
      {
        "command": "sampleExt.reload-command",
        "title": "Reload",
        "category": "SampleExt",
        "icon": "$(refresh)"
      }
    ],
    // ↑↑ 今回設定部分 ↑↑
    "views": {
      "sample-container": [
        {
          "id": "custom-container-id-1",
          "name": "Custom view1"
        },
        {
          "id": "custom-container-id-2",
          "name": "Custom view2"
        }
      ]
    },
    "viewsContainers": {
      "activitybar": [
        {
          "id": "sample-container",
          "title": "Sample",
          "icon": "./logo.svg"
        }
      ]
    }
  }
}

icon部分で設定している$(refresh)はVSCodeに元々用意されているアイコンを参照しています。
他にどんなアイコンがあるのか気になる方は、公式サイトを見てみましょう!

commandの設定はこれで完了です。

次は先ほど、設定したコマンドをmenuに登録していきます。
menuもcontributesから設定が可能です。

{
  "contributes": {
    "commands" :[
      {
        "command": "sampleExt.reload-command",
        "title": "Reload",
        "category": "SampleExt",
        "icon": "$(refresh)"
      }
    ],
    // ~ 省略 ~
    "menus": {
      "view/title": [
        {
          "command": "sampleExt.reload-command"
        }
      ]
    }
  }
}

今回はtitle menuを設定したいので、view/titleを選択します。
ここで設定可能な項目は、下記の通りです。

command : commandsタグ配下に設定したコマンドの識別子
alt : (省略可) 代替えコマンドの設定。代替えコマンドを設定する場合は予め、commandsに代替えのコマンドを登録しておく必要があります。
group : (省略可)メニュー項目をグループ分けできます。(navigationという特殊なグループも存在しますが、これは後述します。)
when : (省略可) 特定の条件に応じて、メニュー表示を制御したい場合に使用します。

UI表示だけ設定するのであれば、これでOKです。
実際に表示すると下記のようにメニューが表示されていることが分かります。

f:id:EaE:20210127223606p:plain

登録したコマンドに関しては、コマンドパレットからも確認することができます。

f:id:EaE:20210127223656p:plain

ただ、ここで物足りないのは、title menuが折りたたまれてしまっている部分です。
せっかくアイコンも設定しているのに、ChromeのReloadボタンのようなアイコンが表示されていません。

こういった場合は、先ほど少しだけ紹介した、navigationという特殊なグループを設定することで解決ができます。 navigationは文字通り、Navメニュー専用のグループでこれを設定することで、アイコンが表示されるようになります。

{
  "contributes": {
    "commands" :[
      {
        "command": "sampleExt.reload-command",
        "title": "Reload",
        "category": "SampleExt",
        "icon": "$(refresh)"
      }
    ],
    // ~ 省略 ~
    "menus": {
      "view/title": [
        {
          // 特殊なグループ"navigation"を指定
          "command": "sampleExt.reload-command",
          "group": "navigation"
        }
      ]
    }
  }
}

これを実際に確認してみると....

f:id:EaE:20210127224507p:plain

今度はReloadアイコンが表示されているのを確認できました。

おまけ

navigationグループを活用することで、Explorerのようなtitle menuを簡単につくることができます。

  "contributes": {
    "commands" :[
      {
        "command": "sampleExt.1addFile-command",
        "title": "Add File",
        "category": "SampleExt",
        "icon": "$(file-add)"
      },
      {
        "command": "sampleExt.2addFolder-command",
        "title": "Add Folder",
        "category": "SampleExt",
        "icon": "$(file-directory-create)"
      },
      {
        "command": "sampleExt.3reload-command",
        "title": "Reload",
        "category": "SampleExt",
        "icon": "$(refresh)"
      },
      {
        "command": "sampleExt.4collapse-command",
        "title": "Collapse All",
        "category": "SampleExt",
        "icon": "$(collapse-all)"
      }
    ],,
    // ~ 省略 ~
    "menus": {
      "view/title": [
        {
          "command": "sampleExt.1addFile-command",
          "group": "navigation"
        },
        {
          "command": "sampleExt.2addFolder-command",
          "group": "navigation"
        },
        {
          "command": "sampleExt.3reload-command",
          "group": "navigation"
        },
        {
          "command": "sampleExt.4collapse-command",
          "group": "navigation"
        }
      ]
    }
  }
}

f:id:EaE:20210127225824p:plain

ちなみに、sampleExt.1addFile-command, sampleExt.4collapse-commandのようにコマンドの先頭部分に数字を入れているのは、コマンドの表示順を調整するためです。
title menuの表示はあくまでcommand名でソートされるため、順番を調整するためには名前つけを意識的に行うか、先頭に数値を入れるなどして調整する必要があります。