如何为 vscode 扩展创建状态栏图标

Question

Thanks for the help, I would like to create a status bar button with a custom icon for my vscode extension. I have scoured documentation and code but none seems to work. The code so far.

import * as vscode from 'vscode';
import "typescript";

let statusBar : vscode.StatusBarItem;

export function activate(context: vscode.ExtensionContext) {
    console.log("code-boilerplate is active!");
    
    const codeBoilerplate = vscode.commands.registerCommand('code-boilerplate.CodeBoilerPlate', () => {
    
        const documentFileType = vscode.window.activeTextEditor?.document.languageId;
        const documentFileName = vscode.window.activeTextEditor?.document.fileName;

        vscode.window.showInformationMessage("Generating your Code Boilerplate... ⌛")
        if (documentFileType === "javascript") {
            return null;
        }
        else if (documentFileType === "python") {
            return null;
        }
        else if (documentFileType === "typescript") {
            return null;
        }
        else if (documentFileType === "csharp") {
            return null;
        }
        else if (documentFileType === "c") {
            return null;
        }
        else if (documentFileType === "cpp") {
            return null;
        }
        else if (documentFileType === "java") {
            return null;
        }
    });

    statusBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
    statusBar.command = codeBoilerplate;

    context.subscriptions.push(codeBoilerplate);
}

// this method is called when your extension is deactivated
export function deactivate() {
    console.log("code-boilerplate is deactivated!");
}

The code is for a code boilerplate which generates a HelloWorld application when you click a button.

Answer 1

In general you can include an icon in a StatusBarItem with:

statusBarItem.text = "$(icon-name) some text";

See https://code.visualstudio.com/api/references/vscode-api#StatusBarItem

Here are the available icons for use: Product Icon Reference .

The text to show for the entry. You can embed icons in the text by leveraging the syntax:

My text $(icon-name) contains icons like $(icon-name) this one.

Where the icon-name is taken from the ThemeIcon icon set, eg light-bulb, thumbsup, zap etc.

However, if you want a custom icon outside that ThemeIcon set, it doesn't look like that is supported: see Support Custom Icons in Status Bar .