用户体验指南
这些指南涵盖了创建与 VS Code 原生界面和模式无缝集成的扩展的最佳实践。在这些指南中,你可以找到
- VS Code 整体 UI 架构和元素的概述
- 扩展贡献的 UI 的建议和示例
- 相关指南和示例的链接
在深入了解细节之前,了解 VS Code 的各种架构 UI 部分如何协同工作以及你的扩展可以在何处以及如何贡献非常重要。
容器
VS Code 界面大致可以分为两个主要概念:容器 和 项。一般来说,容器可以被认为是 VS Code 界面中呈现一个或多个项的较大区域
活动栏
活动栏 是 VS Code 中的一个核心导航界面。扩展可以向活动栏贡献项,这些项充当 视图容器,在主侧边栏中渲染 视图。
主侧边栏
主侧边栏 呈现一个或多个 视图。活动栏和主侧边栏紧密耦合。点击贡献的活动栏项(即:视图容器)将打开主侧边栏,其中将呈现与该视图容器关联的一个或多个视图。一个具体的例子是资源管理器。点击资源管理器项将打开主侧边栏,其中可见文件夹、时间线和大纲视图。
副侧边栏
副侧边栏 也作为呈现带视图的视图容器的界面。用户可以将终端或问题视图等视图拖到副侧边栏,以自定义其布局。
编辑器
编辑器区域包含一个或多个编辑器组。扩展可以贡献 自定义编辑器 或 Webview 以在编辑器区域中打开。它们还可以贡献 编辑器操作 以在编辑器工具栏中显示额外的图标按钮。
面板
面板 是另一个显示视图容器的区域。默认情况下,终端、问题和输出等视图可以在面板中一次在一个选项卡中查看。用户还可以像在编辑器中一样,将视图拖入分屏布局。此外,扩展可以选择将视图容器专门添加到面板,而不是活动栏/主侧边栏。
状态栏
状态栏 提供关于工作区和当前活动文件的上下文信息。它呈现两组 状态栏项。
项
扩展可以将项添加到上面列出的各种容器中。
视图
视图 可以以 树状视图、欢迎视图 或 Webview 视图 的形式贡献,并且可以拖动到界面的其他区域。
视图工具栏
扩展可以公开视图特定的 操作,这些操作作为按钮显示在视图工具栏上。
侧边栏工具栏
作用域为整个视图容器的操作也可以在 侧边栏工具栏 中公开。
编辑器工具栏
扩展可以在编辑器工具栏中直接贡献作用域为编辑器的 编辑器操作。
面板工具栏
面板工具栏 可以公开作用域为当前选中视图的选项。例如,终端视图公开了添加新终端、拆分视图布局等操作。切换到问题视图则公开了不同的操作集。
状态栏项
在左侧,状态栏项 的作用域是整个工作区。在右侧,项的作用域是活动文件。
常用 UI 元素
命令面板
扩展可以贡献命令,这些命令显示在 命令面板 中,用于快速执行某些功能。
快速选择
快速选择 以多种不同方式捕获用户输入。它们可以要求单选、多选,甚至是自由文本输入。
通知
通知 用于向用户传达信息、警告和错误消息。它们也可以用于指示进度。
Webview
Webview 可用于显示自定义内容和功能,适用于超出 VS Code “原生” API 的用例。
上下文菜单
与命令面板的固定位置不同,上下文菜单 赋予用户从特定位置执行操作或配置某些内容的能力。
演练
演练 通过包含丰富内容的多步核对清单,为用户提供了一致的扩展入门体验。
设置
设置 允许用户配置与扩展相关的选项。