Skip to content

UX 指南

这些指南涵盖创建与 VS Code 原生界面和模式无缝集成的插件的最佳实践。在这些指南中,你可以看到:

  • VS Code 整体 UI 架构和元素的概述
  • 插件所配置 UI 的推荐做法和示例
  • 相关指南和示例的链接

在深入细节之前,了解 VS Code 的各个架构性 UI 部分如何组合在一起,以及你的插件如何以及在何处进行配置,是非常重要的。

容器(Containers)

VS Code 界面大致可以分为两个主要概念:容器(containers)条目(items)。一般来说,容器可以看作是 VS Code 界面中渲染一个或多个条目的较大区域:

Visual Studio Code 容器元素的概览

活动栏(Activity Bar)

活动栏是 VS Code 中的核心导航界面。插件可以向活动栏配置条目,这些条目充当视图容器(View Containers),在主侧边栏中渲染视图(Views)

主侧边栏(Primary Sidebar)

主侧边栏渲染一个或多个视图。活动栏和主侧边栏紧密耦合。点击已配置的活动栏条目(即视图容器)会打开主侧边栏,其中会渲染与该视图容器关联的一个或多个视图。一个具体的例子是资源管理器(Explorer)。点击资源管理器条目会打开主侧边栏,其中可以看到文件夹、时间线(Timeline)和大纲(Outline)视图。

次侧边栏(Secondary Sidebar)

次侧边栏也作为渲染带有视图的视图容器的界面。用户可以将终端或问题(Problems)视图等视图拖到次侧边栏,以自定义其布局。

编辑器(Editor)

编辑器区域包含一个或多个编辑器组。插件可以配置自定义编辑器Webview 在编辑器区域中打开。它们还可以配置编辑器操作,在编辑器工具栏中暴露额外的图标按钮。

面板(Panel)

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

状态栏(Status Bar)

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

条目(Items)

插件可以向上面列出的各种容器添加条目。

Visual Studio Code 容器元素的概览

视图(View)

视图可以以树视图欢迎视图Webview 视图的形式配置,并且可以被拖到界面的其他区域。

视图工具栏(View Toolbar)

插件可以暴露特定于视图的操作,这些操作会以按钮形式出现在视图工具栏上。

侧边栏工具栏(Sidebar Toolbar)

作用域为整个视图容器的操作也可以暴露在侧边栏工具栏中。

编辑器工具栏(Editor Toolbar)

插件可以直接在编辑器工具栏中配置作用域为编辑器的编辑器操作

面板工具栏(Panel Toolbar)

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

状态栏条目(Status Bar Item)

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

通用 UI 元素

命令面板(Command Palette)

插件可以配置出现在命令面板中的命令,以快速执行某些功能。

命令面板元素的概览

快速选择(Quick Pick)

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

快速选择元素的概览

通知(Notifications)

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

通知元素的概览

Webview

Webview可以用于显示超出 VS Code“原生”API 的用例的自定义内容和功能。

Webview 元素的概览

上下文菜单(Context Menus)

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

上下文菜单元素的概览

入门向导(Walkthroughs)

入门向导通过包含丰富内容的多步骤清单,为用户提供一致的插件上手体验。

入门向导 API 的概览

设置(Settings)

设置让用户能够配置与插件相关的选项。

设置页面的概览