VS Code 插件开发中文文档

# 树视图

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

# 视图容器

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

view-container

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

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

# 树视图

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

view

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

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

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

# 视图的操作

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

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

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

view-actions

例如：

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

注意

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

如：

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

# 为树视图提供数据

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

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

更多实现请参考nodeDependencies.ts

# 动态创建树视图

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

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

更多实现请参考ftpExplorer.ts

← Webview API →