VS Code插件开发教程(3) 插件能力一览 Capabilities

6,645 阅读7分钟

通用能力(Common Capabilities)

在任何插件中,通用能力都是核心功能,通用能力包括但不限于:

  • 注册命令,配置,快捷键,上下文菜单
  • 存储工作区或全局的数据
  • 展示提示信息
  • Quick Pick收集用户输入
  • 调用本地文件选择器以便用户选择文件
  • 利用Progress API为用户展示长时间运行的操作进度

通用能力主要有以下几种:

  • 命令(Command):命令在VS Code的运转中扮演极为重要的角色。你会通过Command Palette、绑定快捷键或者右键菜单来执行命令,而对于一个插件来说,应该做到下面这两点:

  • 配置(Configuration):一个插件如果需要用户配置(这是很常见的),那么可以通过 contributes.configuration 实现插件配置项的声明(contributes.configuration定义了该插件的配置字段以及默认值等信息,用户可以实现工作区配置或全局配置,可以参考 ESLint插件的配置 ),然后通过 workspace.getConfiguration 接口实现获取用户实际的配置值

  • 快捷键(Keybinding):一个插件可以添加自定义快捷键,详见 contributes.keybindings

  • 上下文菜单(Context Menu):插件可以添加自定义上线文菜单项,详见 contributes.menus

  • 数据存储(Data Storage):有4种数据存储的方式(注:extension context在入口文件的activate函数中可用,是该函数的第一个参数)

    • ExtensionContext.workspaceState:工作空间(workspace)域,以键值对方式存储,由VS Code负责管理。当工作空间再次被打开时,存储的数据会被恢复。
    • ExtensionContext.globalState:全局域,以键值对方式存储,由VS Code负责管理。当任何一个插件被激活时,,存储的数据会被恢复。插件可以同步的读取到键值对数据并且通过setKeysForSync方法异步的赋值
    • ExtensionContext.storagePath:工作空间(workspace)域,可以为一个工作空间指定一个存储路径(一个本地的目录),当我们需要给一个工作空间存储较大的数据时(例如文件),该功能非常有用
    • ExtensionContext.globalStoragePath:全局域,可以为全局空间指定一个存储路径(一个本地的目录),当我们需要在不同的插件之间共用大的数据时(例如文件),该功能非常有用
  • 展示通知(Display Notifications):几乎所有的插件都会用到通知功能,VS Code提供了3个API用于不同级别的通知:

  • 快速选择(Quick Pick):通过 vscode.QuickPick API ,提供给用户一些选项去选择,开发者可以很容易的获取到用户的选择,可以通过该 QuickInput Sample 示例学习相关API的用法

  • 文件选择(File Picker):通过 vscode.window.showOpenDialog 接口可以让用户选择本地的文件

  • 输出通道(Output Channel):输出面板(Output Panel)是一系列 OutputChannel 的集合,可以通过 window.createOutputChannel 实现

  • 进度(Progress):可以通过 vscode.Progress 接口将进度展示给用户,同时可以通过 ProgressLocation方法指定显示的位置 我们可以通过这个示例来学习

主题(Theming)

主题影响VS Code的外观,包括VS Code以及编辑器中代码的配色,我们可以借助该特性做以下事情:

  • 改变编辑区代码的配色
  • 改变VS Code界面的配色
  • 增加自定义文件图标

VS Code中,有三种类型的主题:

  • 颜色主题(Color Theme):UI组件的颜色以及文本字符的颜色,创建主颜色主题的方法可以参见 Color Theme Guide ,还可以参考这个示例 Color Theme Sample

    • colors:标记了UI组件的控制色
    • tokenColors:标记了编辑区域的颜色和样式,详见 Syntax Highlight Guide 获取更多信息
    • semanticTokenColors:编辑区域高亮的加强版,详见 Semantic Highlight Guide
  • 文件图标主题:将文件类型、名称对应为指定的图标(图片),File Icon Theme Guide 有对如何创建文件图标主题的详细介绍

  • 产品图标主题:用在UI、Side barActivity barstatus bar等处的图标,Product Icon Theme Guide 详细介绍了如何创建产品图标主题

声明式语言特性(Declarative Language Features)

Declarative Language Features 包含了基本的编程语言文本编辑能力,比如小括号匹配、自动缩进以及语法高亮。这些都是采用声明式(declaratively)来实现,不用编写任何代码。不过声明语言特性不支持语法提示以及debug之类的高级特性。我们可以借助该特性做以下事情:

  • 给一个插件绑定通用JavaScript语法片段(snippets)
  • 告知VS Code一种新的编程语言
  • 增添或替换一种编程语言的语法
  • 通过grammar injection拓展已经存在的语法

编程式语言特性(Programmatic Language Features)

Programmatic language features 提供了更加丰富的语言功能,例如Hovers、跳转到定义、错误诊断、智能感知、CodeLens(参考文章)。这些特性都可以通过调用 vscode.languages.*接口实现,不过也可以通过编写Language Server来实现。我们可以借助编程式语言特性(Programmatic Language Features)做以下事情:

  • 通过悬浮来展示一个API的用法
  • 通过错误诊断来报告源码中的拼写错误
  • 注册一个新的HTML式化工具
  • 提供一个强大的、上下文感知的智能提示器
  • 给一个语言提供折叠、面包屑功能

工作台拓展(Workbench Extensions)

Workbench Extensions 可以用来扩展VS Code的工作台,还可以拓展鼠标右键,甚至通过VS CodeTreeView API 建立一个自定义explorer(如果想要一个更加自定义的用户界面,可以通过 Webview API)。我们可以借助工作台拓展(Workbench Extensions)做以下事情:

  • 在文件浏览菜单增加一个自定义上下文菜单行为
  • 在侧边栏(Side Bar)增加新的、可交互的树视图(TreeView
  • 定义一个新的Activity Bar视图
  • Status Bar显示新的信息
  • 通过 Webview API 实现自定义内容渲染

VS Code提供了一系列的API帮助开发者在WorkbenchTitle BarActivity BarSide BarPanelEditor GroupStatus Bar)里添加自己的组件,例如:

  • Activity BarAzure App Service 插件增加了一个View Container
  • Side Bar:内置的 NPM 插件增加了一个Tree View
  • Editor Group:内置的 Markdown 插件增加了一个 Webview
  • Status Bar:VSCodeVim 插件增加了一个 Status Bar Item(可以用文字或图标来展示,并且在点击的时候执行命令, Status Bar的应用示例可以参见 statusbar-sample

调试(Debugging)

你可以利用VS CodeDebugging 功能编写Debugger Extension,将VS Code的调试界面用于实现某种debugger。我们可以借助该特性做以下事情:

  • 通过 Debug Adapter implementationVS Code的调试UI和一个调试器链接
  • 新增对某一种语言的调试支持
  • 提供调试配置信息的自动补全

另一方面,VS Code提供了一系列 Debug Extension API ,可以用来实现调试的自动化,我们可以借助该特性做以下事情:

  • 通过动态的调试配置来启动调试任务
  • 跟踪调试任务的生命周期
  • 以编程的方式创建和管理断点

拓展原则(Extension Guidelines)

为了帮助开发者编写合乎VS Code风格的插件,VS Code提供 Extension Guidelines 来帮助开发者学会VS Code插件的最佳开发实践

限制(Restrictions)

插件无法访问到VS Code界面的DOM,没法通过编写自己的CSS或HTML来改变VS Code的界面,VS Code通过Extension Host 进程来管理插件,杜绝插件对界面的篡改以及可能的性能与稳定性影响。

相关文章