VS Code插件开发-全部流程介绍（三）

VS Code插件开发-全部流程介绍（三）

本系列所有博客：点击查看

目录
 VSCode工作台扩展
 工作台扩展常用API
 扩展方向
 相关资料

VSCode工作台扩展

  在开发VSCode插件的过程中，可以通过注册各种后台命令并编写实现函数来实现一系列的功能。更多情况下，作为一个插件，为了方便后台命令的调用，并通过VSCode的界面来达到命令的动态交互，往往涉及VSCode工作台扩展。
  VSCode工作台扩展指的是，能在VSCode的界面上添加并显示出来的UI部分，包括以下几类：

• 标题栏Title Bar：VSCode界面顶部的横栏及弹出菜单。
• 活动栏Activity Bar：VSCode界面最左侧的选项栏。
• 侧栏Side Bar：活动栏右侧的内容栏。
• 面板Panel：VSCode的命令面板，包括错误、输出、调试控制台和终端面板。
• 编辑组Editor Group：编辑界面部分，一个编辑组内包含一个或者多个编辑窗口。VSCode支持拆分出多个编辑组。
• 状态栏Status Bar：VSCode界面最底下的横栏。

  如图，笔者已将VSCode的工作台划分标明：

工作台扩展常用API

• showInformationMessage(message: string, …items: string[]): Thenable
  VSCode右下角显示提示信息；显示选项，可为选项添加回调函数，处理选项的点击事件。
• showInformationMessage(message: string, options: MessageOptions, …items: string[]): Thenable
  VSCode右下角显示提示信息；显示选项，可为选项添加回调函数，处理选项的点击事件；可另外配置消息行为。
• showWarningMessage(message: string, …items: string[]): Thenable
  VSCode右下角显示警告信息；显示选项，可为选项添加回调函数，处理选项的点击事件。
• showWarningMessage(message: string, options: MessageOptions, …items: string[]): Thenable
  VSCode右下角显示警告信息；显示选项，可为选项添加回调函数，处理选项的点击事件；可另外配置消息行为。
• showErrorMessage(message: string, …items: string[]): Thenable
  VSCode右下角显示错误信息；显示选项，可为选项添加回调函数，处理选项的点击事件。
• showErrorMessage(message: string, options: MessageOptions, …items: string[]): Thenable
  VSCode右下角显示错误信息；显示选项，可为选项添加回调函数，处理选项的点击事件；可另外配置消息行为。
• showInputBox(options?: InputBoxOptions, token?: CancellationToken): Thenable
  打开一个输入框，可配置输入框属性，并通过回调函数接收输入的值（undefined、null或者输入值）。
• showOpenDialog(options: OpenDialogOptions): Thenable
  打开一个文件选择窗口，可配置窗口属性，并通过回调函数接收选择的路径（undefined或者选择路径）。
• showQuickPick(items: string[] | Thenable, options?: QuickPickOptions, token?: CancellationToken): Thenable
  打开一个选择框，可配置选择框属性，并通过回调函数接收选择的值（undefined或者选择的值）。
• showQuickPick(items: string[] | Thenable, options: QuickPickOptions & {canPickMany: true}, token?: CancellationToken): Thenable
  打开一个选择框，可配置选择框属性，支持多选，并通过回调函数接收选择的路径（undefined或者选择路径）。
• showSaveDialog(options: SaveDialogOptions): Thenable
  打开一个文件保存窗口，可配置窗口属性，并通过回调函数接收选择的路径（undefined或者选择路径）。
• showTextDocument(document: TextDocument, column?: ViewColumn, preserveFocus?: boolean): Thenable
  在一个编辑器中显示文档，可配置编辑器打开的位置和是否获取编辑焦点。
• createWebviewPanel(viewType: string, title: string, showOptions: ViewColumn | {preserveFocus: boolean, viewColumn: ViewColumn}, options?: WebviewPanelOptions & WebviewOptions): WebviewPanel
  创建一个WebView，可配置打开的位置和是否获取焦点，同时可配置WebView相关属性（如：页面内容）。
• createStatusBarItem(alignment?: StatusBarAlignment, priority?: number): StatusBarItem
  创建一个状态栏的项，可设置对齐（左或者右）和边距（离边缘的距离）。
• createTerminal(options: TerminalOptions): Terminal
  创建一个终端。
• createOutputChannel(name: string): OutputChannel
  创建一个带给定名称的新输出通道。

扩展方向

  VSCode插件开发的目的是基于VSCode增加一些特定功能。根据功能的不同，可以衍生出很多的扩展方向。使用VSCode提供的API和配置方法，可以实现的扩展方向包括：

• 命令注册：命令注册后，VSCode通过Ctrl+Shift+P调出命令搜索栏，即可在直接搜到。

• 菜单显示：编辑器右键菜单、编辑器标题右键菜单等，菜单显示一般和命令绑定。

• 快捷键设置：一般和命令绑定，作用就是通过快捷键调用命令

• 主题显示：色彩主题、文件图标主题等，用来改变VSCode的主题显示。

• 树视图：涉及Activity Bar和Side Bar，可在这两个区域增加树视图。

• WebView：VSCode内嵌的Html网页，可以实现更加复杂、灵活的交互。

• 语法高亮：用于语言方面，优化可读性。

• 片段补全：用于语言方面，增加编辑效率。

  本系列的后续文章，将围绕列出的扩展方向进行详细说明，并给出具体实例。

相关资料

• VSCode工作台扩展：官方关于VSCode工作台扩展的介绍
• VSCode API：官方提供的VSCode API说明