sidebar和tree viewer

sidebar配置

在 package.json 的 contributes 中添加:

"viewsContainers": {
      "activitybar": [
         
          {
            "id":"sidebar_xybank",
            "title": "兴业插件市场",
            "icon": "./img/xybank.png"
          }
      ]
}

sidebar展示内容

 "views": {
      "sidebar_xybank":[
        {
            "id":"sidebar_plugin",
            "name":"插件中心",
            "icon": "./img/yu.svg"
        },
        {
            "id":"sidebar_wuliao",
            "name":"物料中心",
            "icon": "./img/xybank.png"
        }
      ]
    }

treeview

item树节点

实现一个继承父类vscode.TreeItem

export class ConfigEntryItem extends vscode.TreeItem
{
    parentPath?: string;
}

树的内容组织管理

export class ProjEntryList implements vscode.TreeDataProvider<ConfigEntryItem>
{
    proj?: string ;
    constructor(proj?: string) {
        this.proj = proj;
    }
    onDidChangeTreeData?: vscode.Event<void | ConfigEntryItem | null | undefined> | undefined;
    getTreeItem(element: ConfigEntryItem): vscode.TreeItem | Thenable<vscode.TreeItem> {
        return element;
    }
    getChildren(element?: ConfigEntryItem): vscode.ProviderResult<ConfigEntryItem[]> {
        console.log("sidebar by proj");

        if (element) {//子节点
            console.log(element);

            var el = element.label?.toString();
            if(!el){
                el = "";
            }
            var pp = element.parentPath;
            if(!pp){
                pp = "";
            }

            var srcPath = path.join(pp, el);
            var childs2 =  this.getChilds(srcPath);
            return childs2;
        } else { //根节点
            var srcDir = "";
            if (this.proj === "yuemacs"){
                srcDir = "/opt/dir/yuemacs";
            }else  if (this.proj === "yunvim"){
                srcDir = "/opt/dir/yulove/etc/nvim2";
            }
            var childs =  this.getChilds(srcDir);
            return childs;
        }
       
    }

    getChilds(srcDir:string): vscode.ProviderResult<ConfigEntryItem[]> {
        var childs:ConfigEntryItem[] = [];
        var files = fs.readdirSync(srcDir);
        files.forEach( f =>{
            if(f === ".git" || f === ".gitignore" || f === ".cache" || f=== ".lsp-session-v1" || f===".yu"){
                return;
            }
            var srcPath = path.join(srcDir, f);
            const isDir = fs.lstatSync(srcPath).isDirectory();
            if (!isDir) {
                var item = new ConfigEntryItem(f,vscode.TreeItemCollapsibleState.None);
                item.iconPath= path.join(pub.Info.iconsPath, "file_type_affinitydesigner.svg");
                item.command = {command:"yuvscode.yuopen", //命令id
                                arguments:[srcPath] //命令接收的参数
                                };
                childs.push(item);
            }else{
                var item = new ConfigEntryItem(f,vscode.TreeItemCollapsibleState.Collapsed);
                item.parentPath = srcDir;
                item.iconPath= path.join(pub.Info.iconsPath, "default_folder.svg");
                childs.push(item);
            }
        });
        return childs;
    }
}

• getChildren方法是最重要的方法，

• 入参是element: 返回值是TreeItem数组，代表这一层级的所有的元素集合。就是点击各个子目录传递的element
• 入参是undefined: 说明是根结点。

• vscode.TreeItem

• iconPath 图标
• command 点击执行的命令