使用 webpack 时如何在 VSCode 扩展中的 TreeItem 上使用图标

Question

我在 VSCode 扩展程序中向 TreeItem 添加图标时遇到问题。当我加载扩展时，the item has a blank space where the icon ought to be.

我尝试模仿 nodeDependency example。我在 extension.ts 中有以下内容：

class Foo extends TreeItem {
  iconPath = {
    light: path.join(__filename, '..', '..', 'resources', 'light', 'icon.svg'),
    dark: path.join(__filename, '..', '..', 'resources', 'dark', 'icon.svg')
  };
...
}

对于上下文，我的部分目录内容是

src
  extension.ts
resources
  dark
    icon.svg
  light
    icon.svg
dist
  extension.js
  extension.js.map

所以我试图从 dist/extension.js 中找出合适的 svg 文件。

我使用 webpack 来捆绑扩展。

Answer 1

Webpack 更改__filename，因此您尝试转到资源目录失败。

将以下内容添加到 webpack.config.js 以保持 __filename 不变：

module.exports = {
  [...]
  node: {
    __filename: false
  }
};

使用 webpack 时如何在 VSCode 扩展中的 TreeItem 上使用图标

How do I use icons on a TreeItem in a VSCode extension when using webpack

visual-studio-code

vscode-extensions