VSCode IDE插件界面里各个组件的展示方式和相应代码

本文导航

本文会涉及到如下几个IDE组件：左边侧边栏，树形视图，右键菜单，终端面板，弹窗，状态栏，Webview视图。会展示每个组件的视图和相应的代码位置。

VSCode-Huawei IDE插件开发

官方指导文档：https://marketplace.rnd.huawei.com/vscode_huawei/api/简介

VSCode-Huawei样式规范：http://vscodehuaweiui.tools.huawei.com/

1. 左边侧边栏

侧边栏通常用来显示一系列拥有左侧树形视图的服务。

可通过在package.json的contributes -> viewsContainers -> activitybar中定义自己的侧边栏视图。

2. 树形视图

树形视图主要用来展示服务数据，单个视图内的数据成树形结构，默认每条数据占据一行，可显示图标、文本、焦点信息等，还可以包含可展开的子数据列表。

可通过在package.json的contributes -> views –> ${viewID}中定义自己的树形视图（里面的viewID为视图ID，可以是VSCode已有的explorer, debug等，也可以是自己在activitybar中定义的视图ID）。

或则

树形视图里面的数据可以通过自己创建一个resultTreeProvider.ts文件

3. 右键菜单

右键菜单是menus扩展点中的一种，可以是代码编辑区的右键菜单，资源列表里的右键菜单，IDE终端的按钮 或则 IDE终端里的筛选分类选项。

可以通过在package.json的contributes -> menus -> xxx/context中定义(如explorer/context、editor/context、view/item/context等，通过关联一个command来提供相关功能)。

代码编辑区的右键菜单：

资源列表里的右键菜单：

IDE终端里的筛选分类选项：

4. 终端面板

如果需要执行命令行并显示执行结果，可以在代码中通过vscode.window.createTerminal创建一个终端面板，并通过vscode.Terminal的show和sendText方法显示终端面板并发送要执行的命令行。

5. 弹窗

当需要给用户反馈操作结果、接口请求错误等信息时，通常采用弹窗提示的方式。VSCode的弹窗分为三种样式，分别是信息弹窗、警告弹窗和错误弹窗。

三种弹窗分别使用vscode.window.showInformationMessage、vscode.window.showWarningMessage和vscode.window.showErrorMessage方法生成，弹窗同时支持简单的按钮（items参数）和按钮点击事件（then方法）。

6. 状态栏

当需要给用户显示持续一段时间的信息时，如接口请求、操作请求过程中的提示信息等，VSCode通常会选择将其显示在状态栏上。

可以在代码中通过vscode.window.createStatusBarItem创建一个状态栏项，设置其text、tooltip等属性，并通过show()方法显示。状态栏项还支持关联到一个command。

7. Webview视图

由于VSCode对其插件的样式和显示有比较严格的限制，因此如果想按照自己的方式显示界面，通常需要借助Webview视图。

我们可以通过在代码中使用vscode.window.createWebviewPanel创建一个包含Webview视图的编辑器页签，并通过其webview.html属性设置Webview视图的html文本。

Webview视图的html页面可以关联本地的js、css和图片等文件。但需要注意的是，由于VSCode的限制，在Webview视图的html页面不能通过http请求api接口，因此如果需要在页面上展示接口数据，需要在Webview视图外请求数据，而Webview视图内的页面可以通过webview.postMessage和webview.onDidReceiveMessage方法与外部进行数据通信。

HTML WebView

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。