时间戳

首页 > 解决方案 > 将图标添加到树视图的正确方法是什么？

visual-studio-code - 将图标添加到树视图的正确方法是什么？

问题描述

我正在为这样的 TreeItem 指定图标：

export class MyNode extends vscode.TreeItem {
    constructor(
        public readonly label: string,
        public collapsibleState: vscode.TreeItemCollapsibleState,
        public readonly iconPath = {
            light: path.join(__filename, '..', '..', 'resources', 'light', 'name_16x.svg'),
            dark: path.join(__filename, '..', '..', 'resources', 'dark', 'name_16x.svg')
        }
    ) {
        super(label, collapsibleState);
    }
}

当我调试扩展或将其打包并安装 vsix 时，图标不会出现，而是显示一个空白区域。我发现资源目录没有被复制到 out 目录（连同转译的代码）。发布图标的正确方法是什么？

标签： visual-studio-codevscode-extensions

解决方案

基本上，所有资源（图标等）都应该发布到 out 目录是一种误解。所以有问题的代码试图从 out/resources 中引用图标。但实际上你可以将你的文件（资源）放在 out 目录之外，发布它们并从你的代码中引用。

项目中的目录如下所示：

node_modules
out
resources
README.md
etc...

您可以在已发布的 (vsix) 项目中添加任何您想要的内容。

因此，一旦有资源目录，您只需在目录中上一级并直接从 src 的资源文件夹中引用图标。它在调试和发布形式中都有效。更新下面给出的代码应该可以解决问题：

export class MyNode extends vscode.TreeItem {
    constructor(
        public readonly label: string,
        public collapsibleState: vscode.TreeItemCollapsibleState,
        public readonly iconPath = {
            light: path.join(__filename, '..', '..', '..', 'resources', 'light', 'name_16x.svg'),
            dark: path.join(__filename, '..', '..', '..', 'resources', 'dark', 'name_16x.svg')
        }
    ) {
        super(label, collapsibleState);
    }
}

推荐阅读