如何创建树作为Vs代码的扩展

Question

我想在VS代码中创建一个树，但是我的问题是如何手动地向树中添加一个节点。我不知道从哪里开始。我试着回顾所有作为扩展为VScode创建树的项目。

我的问题是我不是打字方面的专家，这些例子也不清楚，或者我不知道它是如何工作的。

您介意帮助我理解如何在VS代码中创建树吗？我的问题是创建一个节点，然后将节点添加到树中。

我回顾了这些项目：

vscode-code-outline
vscode-extension-samples
vscode-git-tree-compare
vscode-html-languageserver-bin
vscode-mock-debug

vscode-树视图

Update1:我成功地使用了“vscode-扩展-示例”并生成了下面的代码示例；现在我不知道该做什么，或者换句话说，如何填充树。我试图使用mytree类来填充数据，但是它没有工作。你能告诉我下一步是什么吗？

extension.ts

    'use strict';

    import * as vscode from 'vscode';

    import { DepNodeProvider } from './nodeDependencies'
    import { JsonOutlineProvider } from './jsonOutline'
    import { FtpExplorer } from './ftpExplorer.textDocumentContentProvider'
    import { FileExplorer } from './fileExplorer';
    //mycode
    import { SCCExplorer } from './sccExplorer';

    export function activate(context: vscode.ExtensionContext) {
        // Complete Tree View Sample
        new FtpExplorer(context);
        new FileExplorer(context);
        //mycode
        new SCCExplorer(context);

        // Following are just data provider samples
        const rootPath = vscode.workspace.rootPath;
        const nodeDependenciesProvider = new DepNodeProvider(rootPath);
        const jsonOutlineProvider = new JsonOutlineProvider(context);

        vscode.window.registerTreeDataProvider('nodeDependencies', nodeDependenciesProvider);
        vscode.commands.registerCommand('nodeDependencies.refreshEntry', () => nodeDependenciesProvider.refresh());
        vscode.commands.registerCommand('nodeDependencies.addEntry', node => vscode.window.showInformationMessage('Successfully called add entry'));
        vscode.commands.registerCommand('nodeDependencies.deleteEntry', node => vscode.window.showInformationMessage('Successfully called delete entry'));
        vscode.commands.registerCommand('extension.openPackageOnNpm', moduleName => vscode.commands.executeCommand('vscode.open', vscode.Uri.parse(`https://www.npmjs.com/package/${moduleName}`)));

        vscode.window.registerTreeDataProvider('jsonOutline', jsonOutlineProvider);
        vscode.commands.registerCommand('jsonOutline.refresh', () => jsonOutlineProvider.refresh());
        vscode.commands.registerCommand('jsonOutline.refreshNode', offset => jsonOutlineProvider.refresh(offset));
        vscode.commands.registerCommand('jsonOutline.renameNode', offset => jsonOutlineProvider.rename(offset));
        vscode.commands.registerCommand('extension.openJsonSelection', range => jsonOutlineProvider.select(range));

    }

sccExplorer.ts

import * as vscode from 'vscode';
import * as path from 'path';
import * as fs from 'fs';
import * as mkdirp from 'mkdirp';
import * as rimraf from 'rimraf';

//#region Utilities


interface Entry {
    uri: vscode.Uri,
    type: vscode.FileType
}

//#endregion

export class FileSystemProvider implements vscode.TreeDataProvider<Entry> {
    getTreeItem(element: Entry): vscode.TreeItem | Thenable<vscode.TreeItem> {
        throw new Error("Method not implemented.");
    }
    onDidChangeTreeData?: vscode.Event<Entry>;

    getChildren(element?: Entry): vscode.ProviderResult<Entry[]> {
        throw new Error("Method not implemented.");
    }
    getParent?(element: Entry): vscode.ProviderResult<Entry> {
        throw new Error("Method not implemented.");
    }

    private _onDidChangeFile: vscode.EventEmitter<vscode.FileChangeEvent[]>;

    constructor() {
        this._onDidChangeFile = new vscode.EventEmitter<vscode.FileChangeEvent[]>();
    }


}

export class SCCExplorer {

    private fileExplorer: vscode.TreeView<any>;

    constructor(context: vscode.ExtensionContext) {
        const treeDataProvider = new myTree().directories;
        this.fileExplorer = vscode.window.createTreeView('scc_Explorer', { treeDataProvider });
        vscode.commands.registerCommand('scc_Explorer.openFile', (resource) => this.openResource(resource));
    }

    private openResource(resource: vscode.Uri): void {
        vscode.window.showTextDocument(resource);
    }
}

export class myTree{
    directories: any;
    constructor()
    {
        this.directories = [
        {
            name: 'parent1',
            child: [{
                name: 'child1',
                child: []
            },
            {
                name: 'child2',
                child: []
            }]
        },
        {
            name: 'parent2',
            child: {
                name: 'child1',
                child: []
            }
        },
        {
            name: 'parent2',
            child: [{
                name: 'child1',
                child: []
            },
            {
                name: 'child2',
                child: []
            }]
        }];
    }
}    

Answer 1

我终于让它起作用了。这花了我很长时间，我一直都是对的。我的问题是，我从来没有显式展开项目，所以我不会看到嵌套的结果，只有顶层。

基本工作实例

import * as vscode from "vscode";

export class OutlineProvider
  implements vscode.TreeDataProvider<any> {
  constructor(private outline: any) {
    console.log(outline);
  }

  getTreeItem(item: any): vscode.TreeItem {
    return new vscode.TreeItem(
      item.label,
      item.children.length > 0
        ? vscode.TreeItemCollapsibleState.Expanded
        : vscode.TreeItemCollapsibleState.None
    );
  }

  getChildren(element?: any): Thenable<[]> {
    if (element) {
      return Promise.resolve(element.children);
    } else {
      return Promise.resolve(this.outline);
    }
  }
}

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand(
    "outliner.outline",
    async () => {
      vscode.window.registerTreeDataProvider(
        "documentOutline",
        new OutlineProvider([dataObject])
      );
    }
  );
  context.subscriptions.push(disposable);
}

const dataObject = {
  label: "level one",
  children: [
    {
      label: "level two a",
      children: [
        {
          label: "level three",
          children: [],
        },
      ],
    },
    {
      label: "level two b",
      children: [],
    },
  ],
}

当然，在package.json里

"contributes": {
    "commands": [
        {
            "command": "outliner.outline",
            "title": "Outline"
        }
    ],
    "views": {
    "explorer": [
        {
          "id": "documentOutline",
          "name": "Document Outline"
        }
      ]
    }
},

类型

注意，treeDataProvider的类型并不是您返回的类型。只有getTree项必须返回树项或扩展它的类。

interface CustomType {
    label: string
    children?: CustomType[]
}

export class TypeExample
    implements vscode.TreeDataProvider<CustomType> {

    constructor(private data: CustomType[]) { }

    getTreeItem(element: CustomType): vscode.TreeItem {
        return new vscode.TreeItem(
            element.label,
            (element.children?.length ?? 0) > 0
                ? vscode.TreeItemCollapsibleState.Expanded
                : vscode.TreeItemCollapsibleState.None
        );
    }

    getChildren(element?: CustomType): Thenable<CustomType[]> {
        return element && Promise.resolve(element.children ?? [])
            || Promise.resolve(this.data);
    }
}

起初，我认为数据提供者的类型应该是树项的返回类型，这当然没有多大意义，我正试图把我的头脑集中在推理上。现在我了解到，您将您的自定义类型传递进来，所有其他方法都继承此类型，并期望该类型作为其参数。只有getTreeItem方法必须返回可以呈现的有效树项。