我正在尝试添加 Tree View到我的 VS Code 扩展。 数据是一个复杂的 JSON 对象。我努力让它作为examples工作对我来说并不直接。
假设我有一个简单的对象:
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] }
]
我想在 TreeView 中呈现它,如下所示:
Cars
> Ford
> Fiesta
> Focus
> Mustang
> BMW
> 320
> X3
> X5
有什么指示可以实现这一点,或者知道我可以查看一个具有类似功能的存储库吗?
最佳答案
这是一个简单的实现:
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
vscode.window.registerTreeDataProvider('exampleView', new TreeDataProvider());
}
class TreeDataProvider implements vscode.TreeDataProvider<TreeItem> {
onDidChangeTreeData?: vscode.Event<TreeItem|null|undefined>|undefined;
data: TreeItem[];
constructor() {
this.data = [new TreeItem('cars', [
new TreeItem(
'Ford', [new TreeItem('Fiesta'), new TreeItem('Focus'), new TreeItem('Mustang')]),
new TreeItem(
'BMW', [new TreeItem('320'), new TreeItem('X3'), new TreeItem('X5')])
])];
}
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 {
children: TreeItem[]|undefined;
constructor(label: string, children?: TreeItem[]) {
super(
label,
children === undefined ? vscode.TreeItemCollapsibleState.None :
vscode.TreeItemCollapsibleState.Expanded);
this.children = children;
}
}
在package.json
中:
{
[...]
"contributes": {
"views": {
"explorer": [
{
"id": "exampleView",
"name": "exampleView"
}
]
}
}
}
您可能希望有一种从 JSON 数据动态创建数据
的方法,但为了使示例尽可能简单,我只是在构造函数中静态创建它。
关于visual-studio-code - 使用 JSON 数据实现 VS Code TreeDataProvider 的简单示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56534723/