如何用自定义JSON构建VS Code树视图?

Question

我想建立一个基于JSON文件/REST调用的树视图，并有我的对象的每种类型的图标。我只有三种类型的对象:服务器、主机和组。对于每种类型，我想有一个自定义图标和配置。菜单类似于我在这里发现的动态上下文菜单。

我是VS Code扩展构建的新手。我试图修改constructor(){this.data ...}以获得json文件并修补类class TreeItem extends vscode.TreeItem，但是我还没有完全掌握我需要的类和代码的行为，我需要改变。

我的当前代码:

import * as vscode from 'vscode';
import * as json from 'jsonc-parser';
import * as path from 'path';

export class CtmInfraProvider implements vscode.TreeDataProvider<TreeItem> {
onDidChangeTreeData?: vscode.Event<TreeItem | null | undefined> | undefined;
data: TreeItem[];
constructor() {
this.data = [new TreeItem('Agents', [
new TreeItem(
'datacenter', [new TreeItem('xyz.domain.name'), new TreeItem('xyz.domain.name'), new TreeItem('xyz.domain.name')])
]),
new TreeItem('Groups', [
new TreeItem(
'abcd', [new TreeItem('xyz.domain.name'), new TreeItem('abc.domain.name'), new TreeItem('123.domain.name')]),
new TreeItem(
'wxyz', [new TreeItem('efg.domain.name'), new TreeItem('456.domain.name')])
])
];
}
getTreeItem(element: TreeItem): vscode.TreeItem | Thenable<vscode.TreeItem> {
return element;
}
getChildren(element?: TreeItem | undefined): vscode.ProviderResult<TreeItem[]> {
if (element === undefined) {
return this.data;
}
return element.children;
}
}
class TreeItem extends vscode.TreeItem {
constructor(
public readonly label: string,
public children?: TreeItem[],
public readonly command?: vscode.Command,
public iconPath?: { light: string, dark: string }
) {
super(
label,
children === undefined ? vscode.TreeItemCollapsibleState.None :
vscode.TreeItemCollapsibleState.Expanded);
this.children = children;
// this.type = type;
this.tooltip = `Agent Details:n - Datacenter: demon - OS: Linux n - Version: 20.22.04.00n - Status: Available`;
// this.description = 'Hello Desc';
}
setConfiguredIcon(): void {
let newLightIcon: any;
let newDarkIcon: any;
newLightIcon = path.join(__filename, '..', '..', 'resources', 'light', 'dna.svg');
newDarkIcon = path.join(__filename, '..', '..', 'resources', 'dark', 'dna.svg');
if (this.iconPath === undefined) {
this.iconPath = {
light: newLightIcon,
dark: newDarkIcon
};
}
else {
this.iconPath = {
light: newLightIcon,
dark: newDarkIcon
};
}
}
}

期望的结果，缺少图标和菜单:基于硬编码json的TreeView

这是我正在查看的json文件的副本。如果有更好的格式，json文件可以随时调整。

{
"inventory": {
"servers": [
{
"server": "abcd",
"host": "abcd.domain.name",
"nodes": [
{
"nodeid": "xyz.domain.name",
"operating_system": "Microsoft Windows Server 2016  (Build 14393)",
"status": "Available",
"version": "20.22.04.00"
},
{
"nodeid": "xyz.domain.name",
"operating_system": "Microsoft Windows Server 2016  (Build 14393)",
"status": "Available",
"version": "20.22.04.00"
},
{
"nodeid": "xyz.domain.name",
"operating_system": "Microsoft Windows Server 2016  (Build 14393)",
"status": "Available",
"version": "20.22.04.00"
}
],
"groups": [
{
"groupid": "abcd",
"nodes": "xyz.domain.name,abc.domain.name,123.domain.name"
},
{
"groupid": "wxyz",
"nodes": "efg.domain.name,456.domain.name"
}
]
},
{
"server": "1234",
"host": "1234.domain.name",
"nodes": null
}
]
}
}

谢谢你的帮助。

Answer 1

我已经设法得到了vscode。

custom treeview的源代码将很快被开源并托管在git上。代码非常大，无法容纳所有不同的对象。现在，我必须弄清楚如何在单击刷新按钮时更新树视图，以及如何在树视图项上调用自定义命令。我将为此创建新的问题，以便更好地跟踪它。

致意。