用户体验指南

这些指南涵盖了创建与VS Code原生界面和模式无缝集成的扩展的最佳实践。在这些指南中，您可以期待找到：

• VS Code 的整体 UI 架构和元素概述
• 扩展贡献的UI推荐和示例
• 相关指南和示例的链接

在深入细节之前，了解VS Code的各种架构UI部分如何组合在一起以及您的扩展可以在何处以及如何做出贡献是很重要的。

容器

VS Code 界面大致可以分为两个主要概念：容器和项目。一般来说，容器可以被视为 VS Code 界面中渲染一个或多个项目的较大部分：

活动栏

活动栏是VS Code中的一个核心导航界面。扩展可以向活动栏贡献项目，这些项目作为视图容器，在主侧边栏中呈现视图。

主侧边栏

主侧边栏渲染一个或多个视图。活动栏和主侧边栏紧密耦合。点击一个贡献的活动栏项目（即：视图容器）会打开主侧边栏，其中与该视图容器关联的一个或多个视图将被渲染。一个具体的例子是资源管理器。点击资源管理器项目将打开主侧边栏，其中文件夹、时间线和轮廓视图是可见的。

次级侧边栏

Secondary Sidebar 也可以作为渲染带有视图的视图容器的表面。用户可以将终端或问题视图等视图拖动到 Secondary Sidebar 以自定义其布局。

编辑器

编辑器区域包含一个或多个编辑器组。扩展可以贡献自定义编辑器或Webviews在编辑器区域中打开。它们还可以贡献编辑器操作以在编辑器工具栏中显示额外的图标按钮。

面板

面板是另一个用于展示视图容器的区域。默认情况下，像终端、问题和输出这样的视图可以在面板中一次查看一个标签页。用户还可以将视图拖拽到分割布局中，就像在编辑器中一样。此外，扩展可以选择将视图容器专门添加到面板中，而不是活动栏/主侧边栏。

状态栏

状态栏提供了关于工作空间和当前活动文件的上下文信息。它渲染了两组状态栏项目。

项目

扩展可以向上面列出的各种容器添加项目。

视图

Views 可以以 树视图、欢迎视图 或 Webview 视图 的形式提供，并且可以拖动到界面的其他区域。

视图工具栏

扩展可以暴露特定于视图的操作，这些操作会作为按钮出现在视图工具栏上。

侧边栏工具栏

作用于整个视图容器的操作也可以在侧边栏工具栏中显示。

编辑器工具栏

扩展可以直接在编辑器工具栏中贡献编辑器操作，这些操作仅限于编辑器。

面板工具栏

面板工具栏可以显示与当前所选视图相关的选项。例如，终端视图提供了添加新终端、拆分视图布局等操作。切换到问题视图则会显示一组不同的操作。

状态栏项目

在左侧，状态栏项目的范围是整个工作区。在右侧，项目的范围是活动文件。

常见UI元素

命令面板

扩展可以贡献出现在命令面板中的命令，以快速执行某些功能。

快速选择

Quick Picks 以几种不同的方式捕获用户的输入。它们可以要求进行单一选择、多重选择，甚至是自由形式的文本输入。

通知

Notifications 用于向用户传达信息、警告和错误消息。它们也可以用于指示进度。

网页视图

Webviews 可以用于显示自定义内容和功能，适用于超出 VS Code "原生" API 的用例。

上下文菜单

与命令面板的固定位置不同，上下文菜单使用户能够从特定位置执行操作或配置某些内容。

教程

Walkthroughs 通过一个包含丰富内容的多步骤清单，为新用户提供一致的扩展入门体验。

设置

Settings 允许用户配置与扩展相关的选项。