vscode-extension-treeview

VSCode Extension TreeView

Task Objectives

• This Skill is used to: create custom tree views in the VSCode sidebar to display data
• Capabilities include: TreeDataProvider, View Container, View Actions, view refresh
• Trigger conditions: when the user needs to display hierarchical data or create custom views

Prerequisites

• Environment requirements: have completed the vscode-extension-basics-skill learning
• Prerequisite knowledge: TypeScript basics

Operation Steps

Standard Process

1. Declare the TreeView contribution point

{
  "contributes": {
    "views": {
      "explorer": [
        {
          "id": "nodeDependencies",
          "name": "Node Dependencies"
        }
      ]
    }
  }
}

2. Implement TreeDataProvider

export class MyTreeDataProvider implements vscode.TreeDataProvider<MyTreeItem> {
  getTreeItem(element: MyTreeItem): vscode.TreeItem {
    return element;
  }

  getChildren(element?: MyTreeItem): Thenable<MyTreeItem[]> {
    if (!element) {
      return Promise.resolve(this.getRootItems());
    }
    return Promise.resolve(this.getChildItems(element));
  }
}

3. Register TreeDataProvider

const provider = new MyTreeDataProvider();
vscode.window.registerTreeDataProvider('myView', provider);

// 或创建 TreeView 以获取更多控制
const treeView = vscode.window.createTreeView('myView', {
  treeDataProvider: provider
});

4. Create TreeItem

class MyTreeItem extends vscode.TreeItem {
  constructor(
    public readonly label: string,
    public readonly collapsibleState: vscode.TreeItemCollapsibleState
  ) {
    super(label, collapsibleState);
    this.tooltip = `${label} - description`;
    this.description = 'version 1.0';
  }
}

5. Add view refresh functionality

class MyTreeDataProvider implements vscode.TreeDataProvider<MyTreeItem> {
  private _onDidChangeTreeData = new vscode.EventEmitter<MyTreeItem>();
  readonly onDidChangeTreeData = this._onDidChangeTreeData.event;

  refresh(): void {
    this._onDidChangeTreeData.fire();
  }
}

// 添加刷新命令
vscode.commands.registerCommand('myView.refresh', () => {
  provider.refresh();
});

Optional Branches

When view action buttons need to be added

{
  "contributes": {
    "commands": [{
      "command": "myView.refresh",
      "title": "Refresh",
      "icon": "media/refresh.svg"
    }],
    "menus": {
      "view/title": [{
        "command": "myView.refresh",
        "when": "view == myView",
        "group": "navigation"
      }]
    }
  }
}

When a View Container needs to be created

{
  "contributes": {
    "viewsContainers": {
      "activitybar": [{
        "id": "myContainer",
        "title": "My Container",
        "icon": "media/icon.svg"
      }]
    },
    "views": {
      "myContainer": [{
        "id": "myView",
        "name": "My View"
      }]
    }
  }
}

Resource Index

Domain References

• references/treeview-basics.md

  • When to read: when a basic tree view needs to be created
  • Content: TreeDataProvider implementation, TreeItem creation

• references/treeview-advanced.md

  • When to read: when advanced view features are needed
  • Content: View Container, View Actions, Welcome Content

Notes

Performance Optimization

• Lazy-load child nodes
• Implement the onDidChangeTreeData event to support refresh
• Avoid loading a large amount of data at once

User Experience

• Provide meaningful icons and descriptions
• Support keyboard navigation
• Display Welcome Content in the view when it is empty