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