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.

Show image

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
  "contributes": {
4
    "submenus": [
5
      {
6
        "id": "sparkup.submenu",
7
        "label": "Sparkup"
8
      }
9
    ]
10
  }
11
}

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

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

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

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

The whole example looks as follows:

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

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.