VS Code TreeDataProvider简单示例

示例结构

package.json

contributes中增加如下片段

"views": {
    "explorer": [
        {
            "id": "TreeView",
            "name": "TreeView"
        }
    ]
}

完整代码如下所示

{
    "name": "test",
    "displayName": "test",
    "description": "test treeview",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.37.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "*"
    ],
    "main": "./out/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "extension.helloWorld",
                "title": "Hello World"
            }
        ],
        "views": {
            "explorer": [
                {
                    "id": "TreeView",
                    "name": "TreeView"
                }
            ]
        }
    },
    "scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -watch -p ./",
        "postinstall": "node ./node_modules/vscode/bin/install",
        "test": "npm run compile && node ./node_modules/vscode/bin/test"
    },
    "devDependencies": {
        "typescript": "^3.3.1",
        "vscode": "^1.1.28",
        "tslint": "^5.12.1",
        "@types/node": "^10.12.21",
        "@types/mocha": "^2.2.42"
    }
}

extension.ts

import * as vscode from 'vscode';
import {DataProvider} from './dataProvider';

export function activate(context: vscode.ExtensionContext) {
    vscode.window.registerTreeDataProvider("TreeView", new DataProvider());
}

export function deactivate() {}

dataProvider.ts

import { TreeDataProvider, Event, TreeItem, TreeItemCollapsibleState, ProviderResult } from "vscode";

export class DataProvider implements TreeDataProvider<DataItem> {
    onDidChangeTreeData?: Event<DataItem | null | undefined> | undefined;
    data: DataItem[];

    constructor() {
        this.data = [
            new DataItem('line1', [new DataItem('line1-sub1'), new DataItem('line1-sub2')]),
            new DataItem('line2', [new DataItem('line2-sub1'), new DataItem('line2-sub2')]),
            new DataItem('line3', [new DataItem('line3-sub1'), new DataItem('line3-sub2')])
        ];
    }

    getTreeItem(element: DataItem): TreeItem | Thenable<TreeItem> {
        return element;
    }

    getChildren(element?: DataItem | undefined): ProviderResult<DataItem[]> {
        if (element === undefined) {
            return this.data;
        }
        return element.children;
    }
}


class DataItem extends TreeItem{
    public children: DataItem[] | undefined;

    constructor(label: string, children?: DataItem[] | undefined) {
        super(label, children === undefined ? TreeItemCollapsibleState.None : TreeItemCollapsibleState.Collapsed);
        this.children = children;
    }
}

执行效果