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

Question

我像这样为 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 目录(连同转换后的代码)。发布图标的正确方法是什么？

Answer 1

基本上，认为所有资源(图标等)都应该发布到 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);
    }
}