VSCode插件开发教程(三)view的两种形式

vscode的view有两种形式,一种是TreeView,另一种是Webview。在package.json定义view的时候,可以通过type属性来指定是哪种形式的view,比如

"views": {
      "hello": [
        {
          "id": "hello.view1",
          "name": "VIEW 1",
          "type": "tree"
        },
        {
          "id": "hello.view2",
          "name": "VIEW 2",
          "type": "webview"
        }
      ]
    },

如果不指定type,默认就是tree

#TreeView

TreeView是默认的view形式,大多数插件的大多数view都是这种形式,比如自带的exporer插件 

image-20230916193236330

展示的就是一颗树。

由此可见,TreeView的展现形式是受限制的,如果想要展示一些特别复杂的界面,就只能用WebView实现。

但是,大多数情况下,TreeView都可以满足需求的,因为Activity Bar对应的视图一般都是起到导航的作用。

有一些视图,虽然是TreeView,但看起来不像,比如

image-20230916193955306

这是viewsWelcome配置项配置的内容,viewsWelcome配置项就是当视图第一次打开,或者没有内容显示的时候,展示的内容,比如,如果增加如下配置

image-20230916200025190

那么显示的效果就如下图所示:

image-20230916200042616

可以看到,welcome的contents里,可以定义执行命令的操作,也可以定义跳转网页的操作。

when字段是,当条件成立时,才显示welcome的内容。关于when可以使用哪些变量,可以参考官方的文档

https://code.visualstudio.com/api/references/when-clause-contexts

#WebView

WebView里面是嵌套的一个html页面,因此给了开发者很大的自由度,可以用html实现任意想要的展示效果。

接下来的教程会展示如何实现这两种形式的view。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
嵌入式开发VSCODE件可以帮助开发人员在Visual Studio Code中进行嵌入式系统的开发和调试。这些件提供了一系列功能,包括语法高亮、代码补全、调试器集成以及与特定嵌入式平台相关的功能。 要开发嵌入式开发VSCODE件,你可以按照以下步骤进行: 1. 安装Visual Studio Code:首先,你需要安装Visual Studio Code编辑器,可以从官方网站https://code.visualstudio.com/ 下载并安装。 2. 创建件项目:打开Visual Studio Code后,在菜单中选择“查看(View)” -> “命令面板(Command Palette)”(或者使用快捷键Ctrl+Shift+P),然后输入“扩展生成器:新建扩展”并选择“JavaScript”或“TypeScript”作为语言。 3. 开发件功能:在生成的项目中,你可以在“src”目录下的相应文件中编写你的件功能。根据你的需求,可以使用VS Code的API来实现自定义的功能,如创建新的编辑器窗口、注册命令、处理文本编辑等。 4. 调试件:为了调试你的件,你可以在项目目录下创建一个名为“launch.json”的文件,并配置调试器的启动设置。然后,在调试视图中选择你的调试配置并启动调试。 5. 发布件:完成开发和测试后,你可以将件打包并上传到VS Code的市场place(https://marketplace.visualstudio.com/)进行发布。在上传之前,你需要注册一个发布者账户。 请注意,以上是一个简单的概述,实际上开发嵌入式开发VSCODE件可能涉及更多的细节和特定的嵌入式平台知识。你可以参考VS Code的官方文档和相关扩展库的文档来获取更多信息和示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值