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

Question

感谢您的帮助，我想为我的 vscode 扩展程序创建一个带有自定义图标的状态栏按钮。我已经搜索了文档和代码，但 none 似乎有效。到目前为止的代码。

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!");
}

该代码适用于当您单击按钮时生成 HelloWorld 应用程序的代码样板。

Answer 1

一般来说，您可以在 StatusBarItem 中包含一个图标：

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

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

以下是可供使用的图标：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, e.g. light-bulb, thumbsup, zap etc.

但是，如果您想要 自定义 图标超出 ThemeIcon 集，它看起来不受支持：请参阅 Support Custom Icons in Status Bar。

这是创建和显示 StatusBarItem 的代码：

/**
 * Create and show a StatusBarItem
 */
function _showStatusBarItem() {

    sbItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 1);
    sbItem.text = "someText";
    sbItem.tooltip = "Some tooltip text";
    sbItem.backgroundColor = new vscode.ThemeColor('statusBarItem.errorBackground');
    sbItem.command = "code-boilerplate.CodeBoilerPlate";
    sbItem.show();
}

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

How to create a status bar icon for a vscode extension

typescript

visual-studio-code

vscode-extensions