VS Code 插件开发 - TreeView

Luncert

已于 2024-10-23 20:41:28 修改

阅读量1.2k

点赞数 23

分类专栏： vscode 文章标签： vscode ide 编辑器插件开发树状视图 TreeView

于 2024-10-20 21:17:39 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37242224/article/details/143098980

版权

树状视图很多插件都可能用到，通常作为一个简单的列表使用，比如管理项目依赖、展示搜索结果。那么 VS Code 的 TreeView 具体怎么玩呢？

基础操作

1.创建视图

在 package.json 的 contributes.views 节点下定义视图：

{
   
  "name": "custom-view-samples",
  ...
  "contributes": {
   
    "views": {
   
      "my-tree-view": [
        {
   
          "id": "myTreeView",
          "name": "My Tree View"
        }
      ]
    }
  },
  ...
}

创建视图：

vscode.window.createTreeView('myTreeView', {
   });

2.实现树节点

首先实现树节点的数据结构：

class MyTreeItem extends vscode.TreeItem {
   
  constructor(
    public readonly label: string,
    public readonly collapsibleState: vscode.TreeItemCollapsibleState
  ) {
   
    super(label, collapsibleState);
    this.tooltip = `MyTreeItem - ${
     this.label}`;
    this.iconPath = new vscode.ThemeIcon('file');
    this.command = {
   
      title: 'Click on me',
      command: <