【調査中】VSCode拡張機能でコンテキストメニューをツリー形式で表現したい

※こちらは調査中の内容です。間違っている可能性が高いです。

VSCode で自作拡張機能を作る際、エディタ上で右クリックした際にコンテキストメニューを表示させ、かつ、ツリーで表現したい。
web上に中々情報が転がっていないので、先生に聞いてみる。

ChatGPTへの質問①

コンテキストメニューを作成したい
メニューを複数用意する際、下記2つのパターンがあると思われる

1. グルーピングして表示順を指定する方法
2. ツリー形式で親子関係をつけてまとめ、普段は子のメニュー項目は隠す方法

プログラミングにおいて、後者のパターンをなんと呼ぶか？

ChatGPTの回答①

プログラミングにおいて、メニュー項目をツリー形式で親子関係をつけ、子のメニュー項目を普段は隠す形式は一般的に 「ツリービュー (Tree View)」 または 「ツリーメニュー (Tree Menu)」 と呼ばれます。

この形式は、ツリー構造でデータを視覚的に表示し、各ノード（親ノードや子ノード）を折りたたんだり展開したりできるインターフェースです。たとえば、ファイルシステムのディレクトリ構造を表示する際に使われることが多いです。

---

---

ChatGPTへの質問②

VSCodeの拡張機能を作成する際、テキストエディタ上の任意の場所で右クリックした際に、ツリーメニュー形式のコンテキストメニューを表示させたい
実装方法を教えて

ChatGPTの回答②

VSCodeの拡張機能で、テキストエディタ上の任意の場所で右クリックした際に、ツリーメニュー形式のコンテキストメニューを表示させるには、以下の手順を踏みます。

1. 拡張機能のセットアップ

まずはVSCodeの拡張機能の雛形を作成します。

# Yo codeを使って新しい拡張機能を作成
yo code

プロンプトに従って、拡張機能の名前や説明を入力します。

2. package.json でコマンドとメニューを定義

次に、package.json で以下のようにコマンドとメニューを定義します。

{
  "contributes": {
    "commands": [
      {
        "command": "extension.parentCommand",
        "title": "Parent Command"
      },
      {
        "command": "extension.childCommand1",
        "title": "Child Command 1"
      },
      {
        "command": "extension.childCommand2",
        "title": "Child Command 2"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "command": "extension.parentCommand",
          "group": "navigation",
          "submenu": [
            {
              "command": "extension.childCommand1",
              "when": "editorTextFocus"
            },
            {
              "command": "extension.childCommand2",
              "when": "editorTextFocus"
            }
          ]
        }
      ]
    }
  }
}

3. コマンドの実装

src/extension.ts（または生成されたメインのTypeScriptファイル）で、上記で定義したコマンドのロジックを実装します。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let parentCommand = vscode.commands.registerCommand('extension.parentCommand', () => {
        vscode.window.showInformationMessage('Parent Command executed');
    });

    let childCommand1 = vscode.commands.registerCommand('extension.childCommand1', () => {
        vscode.window.showInformationMessage('Child Command 1 executed');
    });

    let childCommand2 = vscode.commands.registerCommand('extension.childCommand2', () => {
        vscode.window.showInformationMessage('Child Command 2 executed');
    });

    context.subscriptions.push(parentCommand, childCommand1, childCommand2);
}

export function deactivate() {}

4. 拡張機能の動作確認

拡張機能を実行するために、VSCodeで「F5」を押してデバッグモードで新しいウィンドウを開きます。テキストエディタ内で右クリックすると、「Parent Command」という項目が表示され、それにマウスをホバーすると「Child Command 1」と「Child Command 2」がサブメニューとして表示されるはずです。

このようにして、VSCodeの拡張機能でツリーメニュー形式のコンテキストメニューを実装できます。