How to add "show preview" button to VS Code extension?

Question

I have a VS Code extension that analyses custom JSON and YAML files. So in the project's package.json, there is this:

    "activationEvents": [
        "onLanguage:yaml",
        "onLanguage:json",
        "onCommand:extension.sidePreview"
    ],

Whenever someone opens one of these files, I'd like to add a "show preview" icon in the top right corner of the editor:

So I added the corresponding icon resources to the project, and:

"contributes": {
        "commands": [
            {
                "command": "extension.sidePreview",
                "title": "Preview file",
                "icon": {
                    "dark": "./resources/open-preview-dark.svg",
                    "light": "./resources/open-preview-light.svg"
                }
            }
        ],
        "menus": {
            "editor/title": [
                {
                    "command": "extension.sidePreview",
                    "when": "true"
                }
            ]
        },

But this doesn't work... I don't see any icon.

I'd also like to ensure that this button and command are only available when my function isCustomFile in server.ts returns true. Is there a way of doing this?

score 3 · Accepted Answer · answered May 26 '20 at 01:55

3

That's because you added the wrong section under menus.

You are supposed to add editor/title instead.

Reference

answered May 26 '20 at 01:55

Lex Li

60,503
9
116
147

Hey, thanks! Now I see the command but not the icon :/ i pasted what I have in the question – Maria Ines Parnisari May 26 '20 at 04:46
Oh I had to add `group: navigation`! – Maria Ines Parnisari May 26 '20 at 05:15

How to add "show preview" button to VS Code extension?

1 Answers1