使用 JSON 数据实现 VS Code TreeDataProvider 的简单示例答案

【问题标题】：Simple Example to implement VS Code TreeDataProvider with JSON data使用 JSON 数据实现 VS Code TreeDataProvider 的简单示例
【发布时间】：2019-06-10 23:40:03
【问题描述】：

我正在尝试将 Tree View 添加到我的 VS Code 扩展中。数据是一个复杂的 JSON 对象。我努力让它发挥作用，因为 examples 对我来说并不直接。

假设我有一个简单的对象：

"cars": [
  { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
  { "name":"BMW", "models":[ "320", "X3", "X5" ] }
]

我想在树视图中呈现如下：

Cars
 > Ford
   > Fiesta
   > Focus
   > Mustang
 > BMW
   > 320
   > X3
   > X5

任何指针如何实现这一点，或者知道我可以查看一个类似的回购？

【问题讨论】：

标签： visual-studio-code vscode-extensions

【解决方案1】：

这是一个简单的实现：

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 数据动态创建 data 的方法，但为了使示例尽可能简单，我只是在构造函数中静态创建它。

【讨论】：

这是一个很好的开始，谢谢。我最终把孩子们当成了对象。在 getChildren 函数中，迭代子对象并将其转换为适当的 TreeItem 对象并返回它。这是因为我的 JSON 有多个不同格式的级别
谢谢@Gama11，这对我帮助很大。这应该是官方示例中的代码。
@Gama11 如何为这样的简单 JSON 数据实现 getParent()？似乎 children 属性会使事情复杂化？
另外记得在package.json中加"activationEvents": [ "onView:exampleView" ],

【解决方案2】：

我将 getChildren 的返回对象保留为 any[]，因为我有不同的数据类型返回 w.r.t 不同的父级。但是，单击 Child 再次从同一 DataProvider 调用 getChildren 而不是调用 getChildren 来自孩子的 DataProvider。非常感谢任何建议。

类型1
- 类型2
- 类型2
类型1
- type3
- type3

在type1的DataProvider中，getChildren被调用并根据条件返回type2，在另一种情况下返回type3。然而，点击 type2 会再次从同一个 DataProvider 调用 getChildren，而不是从 type2 提供者调用。

【讨论】：