本站点文档内容均翻译自code.visualstudio.com,仅供个人学习,如有差异请以官网为准。

用户体验指南

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

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

在深入细节之前,了解 VS Code 的各种架构用户界面部分如何相互配合,以及您的扩展如何以及在哪里做出贡献是很重要的。

容器

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

Visual Studio Code 容器元素概述

活动栏

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

主要侧边栏

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

次要侧边栏

次要侧边栏还作为显示视图容器和视图的表面。用户可以将终端或问题视图等视图拖到次要侧边栏中以自定义布局。

编辑器

编辑器区域包含一个或多个编辑器组。扩展可以贡献自定义编辑器网页视图到编辑器区域。它们还可以贡献编辑器操作以在编辑器工具栏中暴露额外的图标按钮。

面板

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

状态栏

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

物品

扩展程序可以向上述各个容器添加项目。

Visual Studio Code 容器元素概述

视图

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

查看工具栏

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

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

编辑工具栏

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

面板工具栏

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

状态栏项目

在左边,状态栏项目 适用于整个工作区。在右边,项目适用于当前活动的文件。

常见用户界面元素

命令面板

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

命令面板元素概述

快速选择

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

快速选择元素概述

通知

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

通知元素概述

网页视图

Webviews 可以用于显示 VS Code 原生 API 之外的自定义内容和功能。

网页视图元素概述

上下文菜单

与命令面板固定的位置不同,上下文菜单允许用户从特定位置执行操作或进行配置。

上下文菜单元素概述

攻略

操作指南 通过多步骤清单为用户通过扩展进行入职提供一致的体验,清单包含丰富的内容。

Walkthrough API 概述

设置

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

设置页面概述