How to customize context menu in Visual Studio Code?
Asked Answered
M

2

23

Is it possible to customize context menu in Visual Studio Code ?

Currently it looks like this.

enter image description here

I need to add two more menu options to this.

Something like "Go Back" and "Go Forward".

Can this be done ?

Merciful answered 12/10, 2017 at 16:13 Comment(3)
Wouldn't it be easier to use these commands from "command palette"? ctrl+shift+p or F1 => and type commandAbrams
You can customize it if you are writing an extension, not sure if there's another wayAbrams
Yes I wrote an extension. Here it is. marketplace.visualstudio.com/items?itemName=AdamAnand.adamstoolMerciful
T
16

Yes, you can can add menu items to the context menu by creating a personal extension for your own use. In your extension, in package.json, add a contributes.menus section. The text editor context menu is called editor/context.

(If you haven't developed an extension before, start with Microsoft's Your First Extension tutorial.)

It may help to look at another extension that adds items to the context menu. One (of many) extension that does this is Bookmarks, which adds three context menu entries. The relevant parts of its package.json are:

{
    "name": "Bookmarks",
    ...
    "contributes": {
        ...
        "menus": {
            ...
            "editor/context": [
                {
                    "command": "bookmarks.toggle",
                    "group": "bookmarks",
                    "when": "editorTextFocus && config.bookmarks.showCommandsInContextMenu"
                },
                {
                    "command": "bookmarks.jumpToNext",
                    "group": "bookmarks@1",
                    "when": "editorTextFocus && config.bookmarks.showCommandsInContextMenu"
                },
                {
                    "command": "bookmarks.jumpToPrevious",
                    "group": "bookmarks@1",
                    "when": "editorTextFocus && config.bookmarks.showCommandsInContextMenu"
                }
            ],
            ....
        },
        ....
    },
    ....
}

The command can be any command; it does not have to be one installed by your extension.

The API docs are a bit vague about the meaning of the group attribute:

Last, a group property defines sorting and grouping of menu items.

Its meaning is described more fully under Sorting of groups. A word like "bookmarks" establishes a group of menu entries separated from other groups by a horizontal rule, with groups ordered alphabetically, and the "@<number>" suffix controls ordering within each group:

Screenshot of three added context menu items

Tiki answered 30/8, 2019 at 15:48 Comment(3)
In case people are wondering, you can also add commands that aren't defined by your own extension, e.g., I have a personal extension, and I was able to add a menu item for the built-in editor.action.transformToTitlecase command so I can make text title case by right-clicking it.Genaro
This doesnt answer the question. Is your answer suggesting us to install the "bookmarks" extension and go to settings.json to configure it to our own command?Prodigal
@Prodigal My answer is suggesting to write a personal extension in order to add menu items. Bookmarks is just an illustrative example to follow. I've edited the answer to hopefully clarify.Tiki
P
1

As for solutions that don't require installing an extension, this is tracked by a feature-request issue ticket: User configurable menus #9285, which apparently is supposed to support adding and removing entries from context menus. You can show your support for the feature-request by giving it a thumbs up, and you can subscribe to it to get notified about discussion and progress. Please avoid making noisy comments there like "+1" / "bump". If you want to contribute to design discussion there, please keep it constructive.


You can add context menu items by writing an extension. I don't think extensions can remove context menu items that were contributed by another extension.

You'd need to implement a menu contribution. You can find related docs at https://code.visualstudio.com/api/references/contribution-points#contributes.menus. In your extension manifest (package.json), fill in the appropriate config in contributes > menus. The screenshot you've shown is of the editor/context menu. You register the menu item contribution with a corresponding command that clicking the menu item will call, and then you implement the command in the same way you'd implement any other command contribution (see also https://code.visualstudio.com/api/references/contribution-points#contributes.commands).

If you want to see an example of an extension that contributes a menu, see https://github.com/Microsoft/vscode-extension-samples/tree/main/source-control-sample.

Prescind answered 29/10, 2023 at 22:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.