现已发布!阅读有关一月份的新功能和修复。

用户体验指南

本指南涵盖了创建能够无缝集成到 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),并在主侧边栏 (Primary Sidebar) 中渲染视图 (Views)。

主侧边栏

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

次侧边栏

次侧边栏 (Secondary Sidebar) 也充当渲染视图容器的界面。用户可以将终端 (Terminal) 或问题 (Problems) 等视图拖动到次侧边栏以自定义布局。

编辑器

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

面板

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

状态栏

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

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

Overview of Visual Studio Code containers elements

视图

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

视图工具栏

扩展可以在视图工具栏上显示为按钮的视图特定操作 (actions)。

作用于整个视图容器的操作也可以在侧边栏工具栏 (Sidebar Toolbar) 中公开。

编辑器工具栏

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

面板工具栏

面板工具栏 (Panel Toolbar) 可以公开作用于当前选定视图的选项。例如,终端视图公开添加新终端、分割视图布局等操作。切换到问题视图将公开一组不同的操作。

状态栏项

左侧的状态栏项 (Status Bar Items) 作用于整个工作区。右侧的项作用于活动文件。

常用 UI 元素

命令面板

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

Overview of the Command Palette element

快速选择

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

Overview of the Quick Pick element

通知

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

Overview of the Notification element

Webview

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.