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插件
展示的就是一颗树。
由此可见,TreeView的展现形式是受限制的,如果想要展示一些特别复杂的界面,就只能用WebView实现。
但是,大多数情况下,TreeView都可以满足需求的,因为Activity Bar对应的视图一般都是起到导航的作用。
有一些视图,虽然是TreeView,但看起来不像,比如
这是viewsWelcome配置项配置的内容,viewsWelcome配置项就是当视图第一次打开,或者没有内容显示的时候,展示的内容,比如,如果增加如下配置
那么显示的效果就如下图所示:
可以看到,welcome的contents里,可以定义执行命令的操作,也可以定义跳转网页的操作。
when字段是,当条件成立时,才显示welcome的内容。关于when可以使用哪些变量,可以参考官方的文档
https://code.visualstudio.com/api/references/when-clause-contexts
#WebView
WebView里面是嵌套的一个html页面,因此给了开发者很大的自由度,可以用html实现任意想要的展示效果。
接下来的教程会展示如何实现这两种形式的view。