首先在 package.json 中注册视图，然后实现 TreeDataProvider 提供数据，接着在 activate 中创建并绑定树视图，最后通过 onDidChangeTreeData 支持刷新。
在 VSCode 中开发自定义侧边栏视图，是扩展功能中非常实用的一部分。通过树视图组件（Tree View），你可以展示结构化数据，比如文件目录、任务列表、API 接口树等，提升用户交互体验。本文将带你一步步实现一个基本的自定义树视图。
注册自定义视图
要在 VSCode 侧边栏中添加自定义视图，首先需要在 package.json 中声明视图的位置和标识。
示例配置：{
"contributes": {
"views": {
"explorer": [
{
"id": "myTreeView",
"name": "我的树视图"
}
]
}
},
"activationEvents": [
"onView:myTreeView"
]
}
这里将视图注册到默认的“资源管理器”面板下。你也可以使用其他容器如 scm 或自定义视图容器。
实现 TreeDataProvider
树视图的数据由一个实现了 TreeDataProvider 接口的对象提供。你需要创建一个类来处理数据的层级结构和节点渲染。
基本实现示例：class MyTreeDataProvider implements vscode.TreeDataProvider<TreeNode> {
getTreeItem(element: TreeNode): vscode.TreeItem {
return element;
}
getChildren(element?: TreeNode): Thenable<TreeNode[]> {
if (!element) {
// 根节点
return Promise.resolve([
new TreeNode('项目A', vscode.TreeItemCollapsibleState.Collapsed),
new TreeNode('项目B', vscode.TreeItemCollapsibleState.None)
]);
} else {
// 子节点逻辑
return Promise.resolve([]);
}
}
}
TreeNode 需要继承或实现 vscode.TreeItem，可设置 label、图标、命令等属性。
激活并绑定视图
在扩展主文件 extension.ts 中激活并关联数据提供者。
export function activate(context: vscode.ExtensionContext) {
const treeDataProvider = new MyTreeDataProvider();
const treeView = vscode.window.createTreeView('myTreeView', {
treeDataProvider
});
context.subscriptions.push(
vscode.window.registerTreeDataProvider('myTreeView', treeDataProvider)
);
}
此时启动调试，侧边栏会出现“我的树视图”，点击即可显示内容。
支持刷新与交互
若数据动态变化，需支持刷新功能。TreeDataProvider 应暴露刷新方法，并使用 onDidChangeTreeData 事件通知视图更新。
class MyTreeDataProvider implements vscode.TreeDataProvider<TreeNode> {
private _onDidChangeTreeData = new vscode.EventEmitter<TreeNode | undefined>();
readonly onDidChangeTreeData = this._onDidChangeTreeData.event;
refresh(): void {
this._onDidChangeTreeData.fire(undefined);
}
// ... 其他方法
}
调用 treeDataProvider.refresh() 即可触发界面重绘。
基本上就这些。掌握 Tree View 的基本结构后，你可以进一步添加右键命令、拖拽支持、搜索过滤等功能，让侧边栏更强大。
