用户体验指南

这些指南涵盖了创建与 VS Code 原生界面和模式无缝集成的扩展的最佳实践。在这些指南中,你将找到:

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

在深入了解细节之前,了解 VS Code 的各种架构 UI 部分是如何组合在一起的,以及你的扩展可以在何处及如何进行贡献,这一点非常重要。

容器

VS Code 界面大致可以分为两个主要概念:容器 (containers)项目 (items)。总的来说,容器可以被视为 VS Code 界面中呈现一个或多个项目的较大区域。

Overview of Visual Studio Code containers elements

活动栏

活动栏 (Activity Bar) 是 VS Code 中的核心导航区域。扩展可以向活动栏贡献项目,这些项目作为 视图容器 (View Containers),在主侧边栏中渲染 视图 (Views)

主侧边栏 (Primary Sidebar)

主侧边栏 用于渲染一个或多个 视图。活动栏和主侧边栏紧密耦合。点击贡献的活动栏项目(即:视图容器)会打开主侧边栏,其中将渲染与该视图容器关联的一个或多个视图。一个具体的例子是资源管理器(Explorer)。点击资源管理器项目将打开主侧边栏,其中可以看到文件夹、时间轴和轮廓视图。

辅助侧边栏 (Secondary Sidebar)

辅助侧边栏 也用作渲染带有视图的视图容器的区域。用户可以将终端或问题视图等视图拖动到辅助侧边栏,以自定义他们的布局。

编辑器

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

面板

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

状态栏

状态栏 (Status Bar) 提供有关工作区和当前活动文件的上下文信息。它渲染两组 状态栏项目

项目 (Items)

扩展可以向上述各种容器添加项目。

Overview of Visual Studio Code containers elements

视图 (View)

视图 可以以 树状视图 (Tree View)欢迎视图 (Welcome View)Webview 视图 的形式贡献,并且可以被拖动到界面的其他区域。

视图工具栏 (View Toolbar)

扩展可以展示特定于视图的 操作 (actions),这些操作以按钮形式出现在视图工具栏上。

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

编辑器工具栏 (Editor Toolbar)

扩展可以直接在编辑器工具栏中贡献作用于编辑器的 编辑器操作

面板工具栏 (Panel Toolbar)

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

状态栏项目 (Status Bar Item)

在左侧,状态栏项目 作用于整个工作区。在右侧,项目作用于活动文件。

常用 UI 元素

命令面板

扩展可以贡献命令,这些命令出现在 命令面板 (Command Palette) 中,以便快速执行某些功能。

Overview of the Command Palette element

快速选择 (Quick Pick)

快速选择 以多种不同方式捕获用户的输入。它们可以要求进行单选、多选,甚至是自由格式的文本输入。

Overview of the Quick Pick element

通知

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

Overview of the Notification element

Webview

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

Overview of the Webview element

上下文菜单

与命令面板的一致性位置相反,上下文菜单 (Context Menus) 让用户能够从特定位置执行操作或进行配置。

Overview of the Context Menu element

演练

演练 (Walkthroughs) 通过包含丰富内容的多步检查清单,为引导用户使用扩展提供了一致的体验。

Overview of the Walkthrough API

设置

设置 (Settings) 使用户能够配置与扩展相关的选项。

Overview of the Settings page

© . This site is unofficial and not affiliated with Microsoft.