视图
视图 (Views) 是可以出现在侧边栏或面板中的内容容器。视图可以包含树状视图 (Tree Views)、欢迎视图 (Welcome Views) 或 Webview 视图,还可以显示视图操作。用户可以重排视图,或者将其移动到另一个视图容器中(例如,从主侧边栏移到辅助侧边栏)。请限制创建的视图数量,因为其他扩展也可以贡献到同一个视图容器中。
✔️ 建议
- 尽可能使用现有图标
- 为语言文件使用文件图标
- 使用树状视图显示数据
- 为每个视图添加图标(以防它被移动到活动栏或辅助侧边栏——这两者都使用图标来表示视图)
- 保持视图数量最少
- 保持名称长度最少
- 限制自定义 Webview 视图的使用
❌ 不建议
- 重复现有功能
- 将树状项目用作单一操作项(例如,点击时触发命令)
- 除非必要,否则不要使用自定义 Webview 视图
- 使用活动栏项目(视图容器)在编辑器中打开 Webview

此示例使用树状视图来显示树状视图项目的扁平列表。
视图位置
视图可以放置在现有的视图容器中,例如“资源管理器”、“源代码管理 (SCM)”和“调试”视图容器。它们也可以通过活动栏添加到自定义的视图容器中。此外,视图可以添加到面板中的任何视图容器。它们也可以被拖动到辅助侧边栏。

视图容器
顾名思义,视图容器是渲染视图的“父”容器。扩展可以将自定义视图容器贡献给活动栏/主侧边栏或面板。用户可以将整个视图容器从活动栏拖动到面板(反之亦然),也可以移动单个视图。

这是一个放置在活动栏/主侧边栏中的视图容器示例

这是一个放置在面板中的视图容器示例
树状视图
树状视图是一种强大且灵活的格式,用于在视图中显示内容。扩展可以添加从简单的扁平列表到深度嵌套树的所有内容。
- 使用描述性标签为项目提供上下文(如果适用)
- 使用产品图标来区分项目类型(如果适用)
❌ 不建议
- 将树状视图项目用作触发命令的按钮
- 除非必要,否则避免深度嵌套。对于大多数情况,几层文件夹/项目是一个很好的平衡。
- 不要为单个项目添加超过三个操作

欢迎视图
当视图为空时,您可以添加内容来引导用户如何使用您的扩展或快速入门。欢迎视图支持链接和图标。
✔️ 建议
- 仅在必要时使用欢迎视图
- 尽可能使用链接而不是按钮
- 仅对主要操作使用按钮
- 使用清晰的链接文本来指示链接目的地
- 限制内容长度
- 限制欢迎视图的数量
- 限制视图中按钮的数量
❌ 不建议
- 除非必要,否则不要使用按钮
- 不要使用欢迎视图进行推广
- 不要使用通用的“了解更多”作为链接文本

此示例展示了扩展的一个主要操作,以及指向文档的附加链接。
带进度的视图
您还可以通过引用视图的 ID 来在视图中显示进度。

视图操作
视图可以在视图工具栏上公开视图操作。请注意不要添加过多的操作,以免造成混乱和干扰。使用内置的产品图标有助于扩展与原生 UI 保持一致。但是,如果需要自定义图标,也可以提供 SVG 图标。
