树视图

本节将教你如何为VS Code添加视图容器和树视图的插件，示例插件的源代码请查看https://github.com/Microsoft/vscode-extension-samples/tree/master/tree-view-sample。

视图容器

视图容器包含了一列视图(views)，这些视图又包含在内置的视图容器中。

view-container

要想配置一个视图容器，你首先得注册package.json中的contributes.viewsContainers。你还必须配置以下字段：

  • id: 新视图容器的名称
  • title: 展示给用户的视图容器名称，它会显示在视图容器上方
  • icon: 在活动栏中展示的图标
  1. "contributes": {
  2.   "viewsContainers": {
  3.     "activitybar": [
  4.       {
  5.         "id": "package-explorer",
  6.         "title": "Package Explorer",
  7.         "icon": "media/dep.svg"
  8.       }
  9.     ]
  10.   }
  11. }

树视图

视图是显示在视图容器中的UI片段。使用contributes.views进行配置，你就可以将新的视图添加到内置或者你配置好的视图容器中了。

view

要想配置一个视图，你首先得注册package.json中的contributes.views。你必须给视图配置一个ID外加一个名称，你还可以配置视图出现的位置：

  • explorer: 显示在资源管理器侧边栏
  • debug: 显示在调试侧边栏
  • scm: 显示在源代码侧边栏
  • test: 测试侧边栏中的资源管理器视图
  • 显示在你定义好的视图容器中
  1. "contributes": {
  2.   "views": {
  3.     "package-explorer": [
  4.       {
  5.         "id": "nodeDependencies",
  6.         "name": "Node Dependencies",
  7.         "when": "explorer"
  8.       }
  9.     ]
  10.   }
  11. }

当用户打开了对应的视图，VS Code会触发onView:${viewId}事件(如上面例子中，这个事件写为onView:nodeDependencies)。你也可以通过配置when字段控制视图的展示。

视图的操作

你可以配置视图下述位置的操作：

  • view/title: 视图标题位置显示的操作。这里可以配置主要的操作，使用"group": "navigation"进行配置，剩余的二级操作则出现在...菜单中。
  • view/item/context: 每个视图项的操作。这里可以配置主要的操作，使用"group": "inline"，剩余的二级操作则出现在...菜单中。

使用when属性控制这些操作的展示。

view-actions

例如：

  1. "contributes": {
  2.   "commands": [
  3.     {
  4.       "command": "nodeDependencies.refreshEntry",
  5.       "title": "Refresh",
  6.       "icon": {
  7.         "light": "resources/light/refresh.svg",
  8.         "dark": "resources/dark/refresh.svg"
  9.       }
  10.     },
  11.     {
  12.       "command": "nodeDependencies.addEntry",
  13.       "title": "Add"
  14.     },
  15.     {
  16.       "command": "nodeDependencies.editEntry",
  17.       "title": "Edit",
  18.       "icon": {
  19.         "light": "resources/light/edit.svg",
  20.         "dark": "resources/dark/edit.svg"
  21.       }
  22.     },
  23.     {
  24.       "command": "nodeDependencies.deleteEntry",
  25.       "title": "Delete"
  26.     }
  27.   ],
  28.   "menus": {
  29.     "view/title": [
  30.       {
  31.         "command": "nodeDependencies.refreshEntry",
  32.         "when": "view == nodeDependencies",
  33.         "group": "navigation"
  34.       },
  35.       {
  36.         "command": "nodeDependencies.addEntry",
  37.         "when": "view == nodeDependencies"
  38.       }
  39.     ],
  40.     "view/item/context": [
  41.       {
  42.         "command": "nodeDependencies.editEntry",
  43.         "when": "view == nodeDependencies && viewItem == dependency",
  44.         "group": "inline"
  45.       },
  46.       {
  47.         "command": "nodeDependencies.deleteEntry",
  48.         "when": "view == nodeDependencies && viewItem == dependency"
  49.       }
  50.     ]
  51.   }
  52. }

!> 注意：如果你需要针对特定的条目显示特殊的操作，定义树视图项的TreeItem.contextValue，并且在when中使用表达式，视图项的值储存在表达式的viewItem中。

如：

  1. "contributes": {
  2.   "menus": {
  3.     "view/item/context": [
  4.       {
  5.         "command": "nodeDependencies.deleteEntry",
  6.         "when": "view == nodeDependencies && viewItem == dependency"
  7.       }
  8.     ]
  9.   }
  10. }

为树视图提供数据

插件创作者需要注册TreeDataProvider，以便动态生成视图中的数据。

  1. vscode.window.registerTreeDataProvider('nodeDependencies', new DepNodeProvider());

更多实现请参考nodeDependencies.ts

动态创建树视图

如果你想在视图中通过编程手段创建一些操作，你就不能再注册window.registerTreeDataProvider了，而是window.createTreeView，这样一来你就有权限提供你喜欢的视图操作了：

  1. vscode.window.createTreeView('ftpExplorer', {
  2.   treeDataProvider: new FtpTreeDataProvider()
  3. });

更多实现请参考ftpExplorer.ts