通用能力(Common Capabilities)
在任何插件中,通用能力都是核心功能,通用能力包括但不限于:
- 注册命令,配置,快捷键,上下文菜单
- 存储工作区或全局的数据
- 展示提示信息
- 用
Quick Pick
收集用户输入 - 调用本地文件选择器以便用户选择文件
- 利用
Progress API
为用户展示长时间运行的操作进度
通用能力主要有以下几种:
-
命令(Command):命令在
VS Code
的运转中扮演极为重要的角色。你会通过Command Palette
、绑定快捷键或者右键菜单来执行命令,而对于一个插件来说,应该做到下面这两点:- 通过 vscode.commands API 来注册和执行命令
- 通过 contributes.commands (Contribution Point) 来让命令在
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:全局域,可以为全局空间指定一个存储路径(一个本地的目录),当我们需要在不同的插件之间共用大的数据时(例如文件),该功能非常有用
- ExtensionContext.workspaceState:工作空间(workspace)域,以键值对方式存储,由
-
展示通知(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 bar
、Activity bar
、status 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 Code
的 TreeView API 建立一个自定义explorer
(如果想要一个更加自定义的用户界面,可以通过 Webview API)。我们可以借助工作台拓展(Workbench Extensions)做以下事情:
- 在文件浏览菜单增加一个自定义上下文菜单行为
- 在侧边栏(
Side Bar
)增加新的、可交互的树视图(TreeView
) - 定义一个新的
Activity Bar
视图 - 在
Status Bar
显示新的信息 - 通过 Webview API 实现自定义内容渲染
VS Code
提供了一系列的API帮助开发者在Workbench
(Title Bar
、Activity Bar
、Side Bar
、Panel
、Editor Group
、Status Bar
)里添加自己的组件,例如:
Activity Bar
:Azure 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 Code
的 Debugging 功能编写Debugger Extension,将VS Code
的调试界面用于实现某种debugger
。我们可以借助该特性做以下事情:
- 通过 Debug Adapter implementation 将
VS 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 进程来管理插件,杜绝插件对界面的篡改以及可能的性能与稳定性影响。