自定义按钮未显示在 VS 代码编辑器标题菜单栏中

Question

In an extension I want to add a button to display in the VS code editor title menu bar when it opens a synapse XML document.In order to that, I added the following command in commands of package.json file,

{
    "command": "webview.show",
    "title": "Show Diagram",
    "category": "Webview",
    "icon": {
        "light": "./resources/images/icons/design-view.svg",
        "dark": "./resources/images/icons/design-view-inverse.svg"
    }
}

and in the package.json file I added the following editor/title,

"menus": {
    "editor/title": [
        {
            "when": "resourceLangId == SynapseXml",
            "command": "webview.show",
            "group": "navigation"
        }
    ],
}

But when I run the extension and opens a synapse XML document, it will not showing the button in the editor title menu bar.

Further I followed following documentation also, https://code.visualstudio.com/api/references/contribution-points#contributes.menus

How can I display the button in VS code editor title menu bar?

Answer 1

I added your command and menu entry to an extension I'm making and the button appears where it should (all be it without an image in my screenshot as I don't have the icon). In my screenshot it is the empty space on the left of the ying-yang button - the tooltip is visible though on mouse over. I just removed the "where" test so I would guess that resourceLangId is not what you think it is or maybe the icons path is wrong so it looks like it isn't there as in my screenshot

Answer 2

For anyone still having the same issue:

In my case, using the correct context name field ( editorLangId ) to match the language ID in the when clause of the command fixed the issue.

https://code.visualstudio.com/api/references/when-clause-contexts#available-contexts

"menus": {
    "editor/title": [
        {
            "when": "editorLangId == SynapseXml",
            "command": "webview.show",
            "group": "navigation"
        }
    ]
}