api - vscode api:如何从文件图标主题中获取图标
问题描述
我正在为 VSCode 编写扩展。在 WebviewPanel 中,我需要显示来自文件图标主题的文件扩展名图标。是否有从文件图标主题获取图标的功能?
解决方案
我也在研究这个。我还没有答案,但到目前为止有一些线索。希望这可以帮助:
https://code.visualstudio.com/api/references/vscode-api#ThemeIcon
对命名图标的引用。目前,文件、文件夹和主题图标
支持 ID。
因此,如果您有文件/文件夹 ID,则可以使用其构造函数创建 ThemeIcon 的实例
建设者
新的 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);
了,但图标不像预期的那样。我期待的是错误图标而不是打字稿图标... ThemeIcon 提到的所有图标都可以在这里找到,所以我猜它毕竟不是 ThemeIcon...
因此 seti 主题的 JSON文档包含一个“iconDefinitions”部分,并且它具有图标的 fontCharacter 和 fontColor。现在我可以将文件扩展名一直关联到图标 fontCharacter 和 fontColor。
然而,这就是它的结束。我无法设置树视图来使用它。
最后我想我需要设置TreeItem的resourceUri让vscode自动确定图标。请参阅https://code.visualstudio.com/api/references/vscode-api#TreeItem.resourceUri
推荐阅读
- javascript - 使用 mongoose (javascript) + ESP32 从 MQTT flespi 开关继电器
- c++ - 由于 cout,GCC 4.8.2 自动矢量化失败
- python - TypeError:X 类型的对象不是 JSON 可序列化的
- mongodb - MongoDB 错误:连接到 mongo 副本集时无法到达集合 [set_name] 的主节点
- typescript - 打字稿全局变量
- c++ - 函数调用 C++ 中的参数太少
- ios - 在核心动画开始之前分层样式的正确方法是什么?
- c++ - C++ 中的二进制求幂
- solr - 索引pdf时的SOLR 7.5 java.lang.StackOverflowError
- javascript - 在 JS 中,在为变量赋值之前声明变量名有什么好处?