【发布时间】：2021-05-16 14:16:35
【问题描述】：
我正在为 VSCode 编写一个扩展。在 WebviewPanel 中，我需要显示来自文件图标主题的文件扩展名图标。有没有从文件图标主题中获取图标的功能？
【问题讨论】：
-
有什么解决办法吗？
标签： api visual-studio-code vscode-extensions
【发布时间】：2021-05-16 14:16:35
【问题描述】：
我也在研究这个。我还没有答案，但到目前为止有一些线索。希望这会有所帮助：
https://code.visualstudio.com/api/references/vscode-api#ThemeIcon
对命名图标的引用。目前，文件、文件夹和主题图标
支持 ID。
因此，如果您有文件/文件夹 ID，则可以使用其构造函数创建 ThemeIcon 的实例
构造函数
new ThemeIcon(id: string, color?: ThemeColor): ThemeIcon
如何获取文件和文件夹 ID？看起来它是通过文件图标主题中定义的文件关联。见vscode API for file icon theme / file association
那么如何获得这些关联呢？
我可以从下面的代码中获取当前图标主题的名称
const config = vscode.workspace.getConfiguration();
console.log(config.workbench.iconTheme); // output "vs-seti"
seti主题是内部扩展，我可以通过
const ext = vscode.extensions.getExtension("vscode.vscode-theme-seti")
console.log(ext.packageJSON.contributes.iconThemes[0].id) // 'vs-seti'
我可以通过
进一步获取主题JSONconst themePath = path.join(ext.extensionPath, ext.packageJSON.contributes.iconThemes[0].path);
然后我可以读取那个 JSON 文件，用它来将文件/目录名称与文件/目录 id 关联，然后获取图标......
今天的报告：
内置 seti 文件图标扩展的 JSON 位于 here
在“fileExtensions”中没有语言文件扩展名（如 .ts）的映射。对于编程语言源代码，需要先找到languageId，然后映射到“languageIds”部分的图标
尝试在“files.associations”配置中查找语言 ID 映射的文件扩展名，但失败了。
然后发现我可以遍历所有扩展 (vscode.extensions.all) 并检查它们的 package.json 以查找语言贡献。相关文件扩展名在语言贡献中定义。所以现在我可以从文件扩展名映射到语言 ID。
然后我尝试了const icon = new vscode.ThemeIcon(langIconId);，但图标不符合预期。我期待的不是打字稿图标，而是错误图标... ThemeIcon 提到所有图标都可以找到here 所以我猜它毕竟不是 ThemeIcon...
所以 seti 主题的 JSON document 包含一个“iconDefinitions”部分，它具有图标的 fontCharacter 和 fontColor。现在我可以将文件扩展名一直关联到图标 fontCharacter 和 fontColor。
然而，这就是它的结束。我无法设置树视图来使用它。
最后我想我需要设置TreeItem的resourceUri让vscode自动确定图标。见https://code.visualstudio.com/api/references/vscode-api#TreeItem.resourceUri
【讨论】：