typescript 如何设置vscode扩展的状态栏(setStatusBarMessage)中的自定义图标和徽标?

6l7fqoea  于 2023-06-07  发布在  TypeScript
关注(0)|答案(2)|浏览(249)

我正在开发一个VS代码扩展,我想在状态栏中设置图标,但我面临的问题。

import * as vscode from 'vscode';
...
export function activate(context: vscode.ExtensionContext) {
    ...

    let disposable = vscode.commands.registerCommand('extension.helloWorld', () => { 
            ....
            //on the place of icon i want the icon to get display in the status bar
                  vscode.window.setStatusBarMessage(
                    "icon "+" icon "+  
                    data1 +
                    " icon " +
                    data2 +
                    " icon" +
                    data3
                  );
                  ...
                  ...
});
...
}

export function deactivate() {}
bmvo0sr5

bmvo0sr51#

您可以在此处找到可用图标的列表(不支持自定义图标):
https://code.visualstudio.com/api/references/icons-in-labels
它们通过$(icon-name)语法使用,例如$(alert)将产生

mf98qq94

mf98qq942#

是的,您可以将图标添加到状态栏。首先,您需要将图标svg转换为字体(您可以使用iconmo等工具),然后将其添加到package.json中。这里的API:(https://code.visualstudio.com/api/references/contribution-points#contributes.icons)
示例:

"contributes": {
    "icons": {
      "skedulo-logo": {
        "description": "Skedulo icon",
        "default": {
          "fontPath": "media/skedulo.woff",
          "fontCharacter": "\\e900"
        }
      }
    }
  }
}

然后在状态栏中:

this.statusBar = vscode.window.createStatusBarItem(
      vscode.StatusBarAlignment.Left,
      100
    );

this.statusBar.text = `$(skedulo-logo)`;

你可以参考一些扩展,比如Graphql:https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql/package.json

相关问题