VSCode API：如何从文件图标主题中获取图标

Question

我正在编写VSCode的扩展。在WebviewPanel中，我需要显示来自文件图标主题的文件扩展名图标。是否有一种方法可以从文件图标主题获取图标？

- Mostik

Answer 1

我也在研究这个问题。目前还没有答案，但已经有一些线索。希望这可以帮到你：

https://code.visualstudio.com/api/references/vscode-api#ThemeIcon

命名图标的引用。目前支持 File、Folder 和 ThemeIcon ID。

如果你有文件/文件夹ID，你可以使用它的构造函数创建 ThemeIcon 实例

构造函数

new ThemeIcon(id: string, color?: ThemeColor): ThemeIcon

如何获取文件和文件夹 ID？看起来是通过文件图标主题中定义的文件关联。请参见vscode API 的文件图标主题/文件关联

那么如何获取这些关联？

我可以从以下代码中获取当前图标主题的名称

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'

我可以通过以下方式获取主题的JSON：

const themePath = path.join(ext.extensionPath, ext.packageJSON.contributes.iconThemes[0].path);

那么我可以读取JSON文件，使用它将文件/目录名称关联到文件/目录ID，然后获取图标......

---

今天的报告：

内置的Seti文件图标扩展的JSON文件在这里

在“fileExtensions”中没有语言文件扩展名的映射（例如.ts）。对于编程语言源代码，需要先找到languageId，然后映射到“languageIds”部分中的图标。

试图在“files.associations”配置中查找文件扩展名到语言ID映射，但失败了。

然后发现可以循环遍历所有扩展名（vscode.extensions.all）并检查其package.json文件以查找语言贡献。相关的文件扩展名在语言贡献中定义。因此，现在可以从文件扩展名映射到语言ID。

然后我尝试了const icon = new vscode.ThemeIcon(langIconId); 但是图标不是我期望的。我期望的TypeScript图标而不是错误图标... ThemeIcon提到所有图标都可以在这里找到，所以我猜它并不是一个ThemeIcon...

因此，seti主题的JSON文档包含一个“iconDefinitions”部分，其中有图标的fontCharacter和fontColor。现在我可以将文件扩展名关联到图标的fontCharacter和fontColor。

但是这没有结束。我无法设置tree-view来使用它。

最后，我认为我需要将TreeItem的resourceUri设置为让vscode自动确定图标。请参见https://code.visualstudio.com/api/references/vscode-api#TreeItem.resourceUri

- Bing Ren