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