首先在package.json中注册视图容器，接着创建实现TreeDataProvider的数据提供者类，然后在activate函数中通过createTreeView注册树视图，最后为树项添加命令以支持点击交互，完成自定义侧边栏的构建。
在VSCode扩展开发中，树视图（Tree View）API是构建侧边栏自定义界面的核心工具。通过它，你可以创建结构化的、可交互的导航界面，比如文件资源管理器、任务列表、日志查看器等。下面介绍如何使用树视图API实现一个简单的自定义侧边栏。
1. 注册树视图容器
要在VSCode侧边栏中显示自定义视图，首先需要在package.json中声明视图的位置和组别。
在contributes.views字段中添加配置：
{
"contributes": {
"views": {
"explorer": {
"myTreeView": {
"name": "我的自定义视图",
"when": "workbench.view.explorer"
}
}
}
}
}
其中explorer表示将视图注入到资源管理器面板中，也可以使用myCustomViewContainer作为自定义容器ID，并通过viewsContainers新增侧边栏标签。
2. 实现树视图数据提供者
树视图的数据由实现了TreeDataProvider接口的对象提供。你需要创建一个类来处理数据结构和刷新逻辑。
示例代码：
import * as vscode from 'vscode';
<p>class MyTreeItem extends vscode.TreeItem {
constructor(
public readonly label: string,
public readonly collapsibleState: vscode.TreeItemCollapsibleState
) {
super(label, collapsibleState);
}
}</p><p>class MyDataProvider implements vscode.TreeDataProvider<MyTreeItem> {
private _onDidChangeTreeData: vscode.EventEmitter<MyTreeItem | undefined | null | void> =
new vscode.EventEmitter<MyTreeItem | undefined | null | void>();
readonly onDidChangeTreeData: vscode.Event<MyTreeItem | undefined | null | void> = this._onDidChangeTreeData.event;</p><p>getChildren(element?: MyTreeItem): Thenable<MyTreeItem[]> {
if (!element) {
return Promise.resolve([
new MyTreeItem('项目一', vscode.TreeItemCollapsibleState.Collapsed),
new MyTreeItem('项目二', vscode.TreeItemCollapsibleState.None)
]);
} else {
return Promise.resolve([]);
}
}</p><p>refresh(): void {
this._onDidChangeTreeData.fire();
}
}
3. 在激活时注册树视图
在扩展的activate函数中注册树视图实例。
export function activate(context: vscode.ExtensionContext) {
const dataProvider = new MyDataProvider();
const treeView = vscode.window.createTreeView('myTreeView', {
treeDataProvider: dataProvider
});
<p>context.subscriptions.push(
vscode.commands.registerCommand('myExtension.refresh', () => {
dataProvider.refresh();
})
);
}
这样就完成了一个基础的树视图注册。点击侧边栏中的“我的自定义视图”即可看到内容。
4. 支持交互操作
你可以为树项添加命令，使其响应点击事件。
修改MyTreeItem构造函数：
constructor(
public readonly label: string,
public readonly collapsibleState: vscode.TreeItemCollapsibleState
) {
super(label, collapsibleState);
this.command = {
command: 'myExtension.onClick',
title: '点击执行',
arguments: [label]
};
}
<p>// 注册命令
context.subscriptions.push(
vscode.commands.registerCommand('myExtension.onClick', (label) => {
vscode.window.showInformationMessage(<code>你点击了：${label}</code>);
})
);
现在每个树节点都可以触发命令，实现跳转、打开文件或执行任务等功能。
基本上就这些。掌握树视图API后，你可以构建出复杂的侧边栏界面，如Git状态树、数据库浏览器、API调试面板等。关键是理解数据提供者的异步结构和事件刷新机制。配合图标、描述、上下文值（contextValue）和菜单贡献点，还能实现右键菜单和多态行为。不复杂但容易忽略细节。
