Creating a Submenu in VS Code: A Step-by-Step Guide

While creating a session about Visual Studio Code extension development, I discovered that creating a submenu in the context menus is possible. These submenus are a great way to make the context menus less cluttered and easier to use.

When trying it out, I could not make it work easily as the docs were unclear. So I decided to write this article to help others who want to create a submenu in their Visual Studio Code context menus.

Creating the submenu

Creating a submenu starts with the package.json file (extension manifest) at the root of your extension.

Add a submenu property to the contributes section:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
  ...
  "contributes": {
    "submenus": [
      {
        "id": "sparkup.submenu",
        "label": "Sparkup"
      }
    ]
  }
}

Once you have added the submenu, you can now register the submenu in the context menu:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  ...
  "contributes": {
    "menus": {
      "editor/context": [
        {
          "submenu": "sparkup.submenu",
          "group": "sparkup"
        }
      ]
    }
  }
}

The only thing left to do is to add the commands to the submenu:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  ...
  "contributes": {
    "menus": [
      "sparkup.submenu": [
        {
          "command": "vscode-sparkup.biasFreeLanguage"
        }
      ]
    ]
  }
}

The whole example looks as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  ...
  "contributes": {
    "submenus": [
      {
        "id": "sparkup.submenu",
        "label": "Sparkup"
      }
    ],
    "menus": [
      "editor/context": [
        {
          "submenu": "sparkup.submenu",
          "group": "sparkup"
        }
      ],
      "sparkup.submenu": [
        {
          "command": "vscode-sparkup.biasFreeLanguage"
        }
      ]
    ]
  }
}

I hope this article helped you to create a submenu in your Visual Studio Code context menus. If you have any questions, feel free to leave a comment below.

Creating a Submenu in VS Code: A Step-by-Step Guide

Creating the submenu

Report issues or make changes on GitHub

Related posts

Comments