Question

我想用VS代码创建树，但是我的问题是如何手动将节点添加到树中。我不确定从哪里开始。我试图查看所有为VScode创建树作为扩展的项目。

我的问题是我不是Typescript方面的专家，示例也不那么清楚，或者我不确定它的工作方式。

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

我查看了以下项目：

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

vscode-tree-view

Update1：我设法使用“ vscode-extension-samples”并生成以下代码示例；现在我不知道该怎么办，换句话说，如何填充树。我尝试使用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方法必须返回可以呈现的有效树项目。

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

vscode-tree-view

1 个答案:

基本工作示例

类型