DEV Community

loading...
Cover image for Creating a VSCode extension for all other extensions

Creating a VSCode extension for all other extensions

Elio Struyf
Elio Struyf is an independent Engineering Lead working for Valo Intranet, Blogger, and Speaker. Loves stickers - if you want stickers as well, get them at https://pyod.shop.
・2 min read

Earlier this week, I wanted to a couple of action buttons to the Visual Studio Code sidebar. To do this, you will need to register a button for the activity bar and create a view panel to show your sidebar actions.

As this extension would only have two to three actions, it would be a bit overkill, but the use case was still there. A button makes it easier than searching the command in the command palette. This use case made me wonder, can I create an extension that another extension can use to share or enhance their experience.

I wanted to make it easier for extensions to add their actions to a side panel without too much overhead. With this idea in mind, I started developing.

The extension

The extension I created is the Extension panel, and it offers a sidebar view panel which allows other extensions to link their actions to it.

Example of how it is used for the Writing Style Guide extension

The communication flow

As extensions run in their context, I needed to find a simple way to make it possible to share the configuration between them.

The trick here is to use a VSCode command. The extension panel code, will try to execute the <publisher>.<your-extension-name>.panel.registration command. To register your extension, all you need to do is specify this command with a configuration like this:

context.subscriptions.push(vscode.commands.registerCommand('<publisher>.<your-extension-name>.panel.registration', () => {
        return {
            id: '<your-extension-name>',
            title: 'Extension actions',
            description: 'Actions for testing purposes only.',
            actions: [{
                title: 'Action 1',
                command: 'vscode-extension-panel.panel.test',
                data: true,
                type: "checkbox"
            }, {
                title: 'Action 2',
                command: 'vscode-extension-panel.panel.test',
                data: 'Just extra text',
                type: "button"
            }]
        };
    })
);
Enter fullscreen mode Exit fullscreen mode

When the extension panel's code executes the registration command, it will retrieve the specified configuration and show the defined actions.

When there is no registration command present, it will fail internally and skip the extension.

If you are an extension developer for Visual Studio Code, add your actions without writing a whole new sidebar panel. I recommend you to give the Extension Panel a try.

PS: If you would use the extension, please submit a PR to add your extension to the README.

Discussion (0)