vscode插件开发之 - Treeview视图

2024-06-19 18:36

本文主要是介绍vscode插件开发之 - Treeview视图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  一些测试类插件,往往需要加载测试文件,并执行这些测试文件。以playwright vscode为例,该插件可以显示目录下所有的测试文件。如下图所示,显示了tests目录下的所有xxx.spec.js文件,那么如何在vscode插件开发中显示TreeView呢?主要有三个步骤

 步骤一:在package.json文件中配置TreeView

如下所示,在views中配置了explorer类型的view,含义是资源管理器是默认的视图容器,它显示工作区的文件和文件夹结构。在视图部分中的“explorer”键表示在这里定义的自定义视图将被添加到VS Code中的资源管理器视图容器中。自定义的视图名称是Sample,id是sample。

"contributes": {"views": {"explorer": [{"id": "sample","name": "Sample"}]},"commands": [{"command": "sampleExplorer.refresh","title": "Refresh Sample Explorer"}]},

步骤二:自定义TreeDataProvider

在VS Code中,自定义TreeDataProvider可以让你在侧边栏中显示自定义的数据结构,比如文件树、任务列表等。
要自定义自己的TreeDataProvider,需要实现以下几个核心方法。实现TreeDataProvider接口:
getTreeItem(element: T): TreeItem | Thenable<TreeItem>:返回给定元素对应的TreeItem实例。
getChildren(element?: T): ProviderResult<T[]>:返回给定元素的子元素。如果没有传入元素,则返回根元素。
(可选)getParent?(element: T): ProviderResult<T>:返回给定元素的父元素,用于支持“焦点模式”。
(可选)onDidChangeTreeData?: 事件,用于通知视图数据已更改。

  以下面的代码为例子,这里继承了vscode.TreeDataProvider,getChidren方法中主要是读取workspace的tests目录下的文件,这里调用getFiles方法。getFiles方法中,判断files中如果是folder则进行折叠,如果不是folder则设置为true。通过设置是否vscode.TreeItemCollapsibleState.Collapsed控制treeItem的显示。

class SampleProvider implements vscode.TreeDataProvider<SampleItem> {private _onDidChangeTreeData: vscode.EventEmitter<SampleItem | undefined | null | void> = new vscode.EventEmitter<SampleItem | undefined | null | void>();readonly onDidChangeTreeData: vscode.Event<SampleItem | undefined | null | void> = this._onDidChangeTreeData.event;constructor(private workspaceRoot: string) { }refresh(): void {this._onDidChangeTreeData.fire();}getTreeItem(element: SampleItem): vscode.TreeItem {return element;}getChildren(element?: SampleItem): Thenable<SampleItem[]> {if (!this.workspaceRoot) {vscode.window.showInformationMessage('No file in empty workspace');return Promise.resolve([]);}const testDirPath = path.join(this.workspaceRoot, 'tests');if (element) {console.log(element.label)return Promise.resolve(this.getFiles(path.join(testDirPath, element.label)));} else {return Promise.resolve(this.getFiles(testDirPath));}}private getFiles(dir: string): SampleItem[] {if (!fs.existsSync(dir)) {vscode.window.showInformationMessage('Test directory does not exist');return [];}const files: string[] = fs.readdirSync(dir);if (files.length === 0) {vscode.window.showInformationMessage('No files found in test directory');return [];}return files.map(file => {const filePath = path.join(dir, file);const stat = fs.lstatSync(filePath);return new SampleItem(file, stat.isDirectory() ? vscode.TreeItemCollapsibleState.Collapsed : vscode.TreeItemCollapsibleState.None);});}
}class SampleItem extends vscode.TreeItem {constructor(public readonly label: string,public readonly collapsibleState: vscode.TreeItemCollapsibleState) {super(label, collapsibleState);}iconPath = {light: path.join(__filename, '..', '..', 'resources', 'light', 'dependency.svg'),dark: path.join(__filename, '..', '..', 'resources', 'dark', 'dependency.svg')};
}

   SampleItem对象实际继承了vscode.TreeItem,包含两个属性,label和collapsibleState。假设workspace目录的tests目录下有如下文件和文件夹,调用getFiles()方法后,生成的SampleItem对象信息如下图所示,vscode在显示的时候会根据collapsibleState值来控制是否折叠显示。

步骤三:在active中注册TreeDataProvider

构建好TreeDataProvider后,还需要在activate函数中注册该provider

export function activate(context: vscode.ExtensionContext) {const sampleProvider = new SampleProvider(vscode.workspace.rootPath || '');vscode.window.registerTreeDataProvider('sample', sampleProvider);vscode.commands.registerCommand('sampleExplorer.refresh', () => sampleProvider.refresh());
}

  执行插件,可以看到,在左侧资源管理视图容器中,显示了名称为SAMPLE的视图,显示的内容正是tests目录下的文件名称,如果是folder,会折叠显示,点击folder,会显示folder下的文件名称。

这篇关于vscode插件开发之 - Treeview视图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1075825

相关文章

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件

CnPlugin是PL/SQL Developer工具插件使用教程

《CnPlugin是PL/SQLDeveloper工具插件使用教程》:本文主要介绍CnPlugin是PL/SQLDeveloper工具插件使用教程,具有很好的参考价值,希望对大家有所帮助,如有错... 目录PL/SQL Developer工具插件使用安装拷贝文件配置总结PL/SQL Developer工具插

VSCode设置python SDK路径的实现步骤

《VSCode设置pythonSDK路径的实现步骤》本文主要介绍了VSCode设置pythonSDK路径的实现步骤,包括命令面板切换、settings.json配置、环境变量及虚拟环境处理,具有一定... 目录一、通过命令面板快速切换(推荐方法)二、通过 settings.json 配置(项目级/全局)三、

基于Python开发一个有趣的工作时长计算器

《基于Python开发一个有趣的工作时长计算器》随着远程办公和弹性工作制的兴起,个人及团队对于工作时长的准确统计需求日益增长,本文将使用Python和PyQt5打造一个工作时长计算器,感兴趣的小伙伴可... 目录概述功能介绍界面展示php软件使用步骤说明代码详解1.窗口初始化与布局2.工作时长计算核心逻辑3