VSCode TreeView视图组件开发

class TreeNode {
    constructor(
        public readonly label: string,
        public readonly collapsibleState?: vscode.TreeItemCollapsibleState,
        public readonly command?: vscode.Command
    ) {}
}

class MyTreeItem extends vscode.TreeItem {
    constructor(
        public readonly label: string,
        public readonly collapsibleState: vscode.TreeItemCollapsibleState
    ) {
        super(label, collapsibleState);
        this.tooltip = `点击查看详情: ${this.label}`;
        this.iconPath = vscode.ThemeIcon.Folder;
    }
}

class MyTreeDataProvider implements vscode.TreeDataProvider {
    private _onDidChangeTreeData = new vscode.EventEmitter();
    readonly onDidChangeTreeData = this._onDidChangeTreeData.event;

    refresh(): void {
        this._onDidChangeTreeData.fire(undefined);
    }

    getChildren(element?: MyTreeItem): Thenable {
        if (!element) {
            return Promise.resolve([
                new MyTreeItem('项目A', vscode.TreeItemCollapsibleState.Collapsed),
                new MyTreeItem('项目B', vscode.TreeItemCollapsibleState.Collapsed)
            ]);
        } else {
            // 子节点逻辑
            return Promise.resolve([new MyTreeItem('子项1', vscode.TreeItemCollapsibleState.None)]);
        }
    }

    getTreeItem(item: MyTreeItem): vscode.TreeItem {
        return item;
    }
}

export function activate(context: vscode.ExtensionContext) {
    const treeDataProvider = new MyTreeDataProvider();

    const treeView = vscode.window.createTreeView('myTreeView', {
        treeDataProvider: treeDataProvider
    });

    context.subscriptions.push(
        treeView,
        vscode.commands.registerCommand('myExtension.refresh', () => {
            treeDataProvider.refresh();
        })
    );
}

{
  "contributes": {
    "views": {
      "explorer": [
        {
          "id": "myTreeView",
          "name": "我的树视图"
        }
      ]
    },
    "commands": [
      {
        "command": "myExtension.refresh",
        "title": "刷新视图"
      }
    ],
    "viewCommands": [
      {
        "command": "myExtension.refresh",
        "title": "刷新",
        "icon": "resources/refresh.svg",
        "when": "view == myTreeView"
      }
    ]
  }
}