尝试以扩展 VS Code 中的代理模式!

用户体验指南

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

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

在深入了解细节之前,了解 VS Code 的各种架构 UI 部分如何协同工作以及您的扩展可以在何处以及如何贡献是重要的。

容器

VS Code 界面大致可以分为两个主要概念:容器。通常,容器可以被认为是 VS Code 界面中渲染一个或多个项的较大区域。

Overview of Visual Studio Code containers elements

活动栏

活动栏是 VS Code 中的核心导航界面。扩展可以将项贡献到活动栏,这些项充当视图容器,在主侧边栏中渲染视图

主侧边栏

主侧边栏渲染一个或多个视图。活动栏和主侧边栏紧密耦合。单击贡献的活动栏项(即视图容器)会打开主侧边栏,其中将渲染与该视图容器关联的一个或多个视图。一个具体的例子是资源管理器。单击资源管理器项将打开主侧边栏,其中显示文件夹、时间线和大纲视图。

辅助侧边栏

辅助侧边栏也作为渲染视图容器和视图的界面。用户可以将终端或问题视图等视图拖到辅助侧边栏以自定义其布局。

编辑器

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

面板

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

状态栏

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

扩展可以将项添加到上面列出的各种容器中。

Overview of Visual Studio Code containers elements

视图

视图可以以树视图欢迎视图Webview 视图的形式贡献,并可以拖动到界面的其他区域。

视图工具栏

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

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

编辑器工具栏

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

面板工具栏

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

状态栏项

左侧的状态栏项限定于整个工作区。右侧的项限定于活动文件。

常用 UI 元素

命令面板

扩展可以贡献显示在命令面板中的命令,以快速执行某些功能。

Overview of the Command Palette element

快速选择

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

Overview of the Quick Pick element

通知

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

Overview of the Notification element

Webview

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

Overview of the Webview element

上下文菜单

与命令面板的一致位置相反,上下文菜单使用户能够从特定位置执行操作或配置某些内容。

Overview of the Context Menu element

演练

导览通过多步清单(包含丰富内容)为用户提供一致的扩展入门体验。

Overview of the Walkthrough API

设置

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

Overview of the Settings page