VS Code 插件开发初体验
插件能做什么?
下面我们看看使用插件API能做到些什么:
- 改变VS Code的颜色和图标主题——主题
- 在UI中添加自定义组件和视图——扩展工作台
- 创建Webview,使用HTML/CSS/JS显示自定义网页——Webview指南
- 支持新的编程语言——语言插件概览
- 支持特定运行时的调试——调试插件指南
如何开发插件?
首先 Node 和 Git 必不可少,然后安装Yeoman和VS Code Extension Generator的依赖
npm install -g yo generator-code
通过 yo 脚手架初始化一个仓库:
目录结构大致如下:
.
├── .vscode
│ ├── launch.json // 插件加载和调试的配置
│ └── tasks.json // 配置TypeScript编译任务
├── .gitignore // 忽略构建输出和node_modules文件
├── README.md // 一个友好的插件文档
├── src
│ └── extension.ts // 插件源代码
├── package.json // 插件配置清单
├── tsconfig.json // TypeScript配置
插件清单
每个 VS Code 插件都必须包含一个package.json
,它就是插件的配置清单。package.json
混合了 Node.js 字段,如:scripts
、dependencies
,还加入了一些VS Code独有的字段,如:publisher
、activationEvents
、contributes
等。
name
和publisher
: VS Code 使用<publisher>.<name>
作为一个插件的 ID。你可以这么理解,myFirstPlugin 例子的 ID 就是jeremy_hxj.myfirstplugin
。VS Code 使用 ID 来区分各个不同的插件。main
: 插件的主入口。activationEvents
和contributes
: 激活事件 and 发布内容配置engines.vscode
: 描述了这个插件依赖的最低 VS Code API 版本。
postinstall
脚本: 如果你的engines.vscode
声明的是1.54 版的 VS Code API,那它就会按照这个声明去安装目标版本。一旦vscode.d.ts
文件存在于node_modules/vscode/vscode.d.ts
,IntelliSense 就会开始运作,你就可以对所有 VS Code API 进行定义跳转或者语法检查了。
{
"name": "myfirstplugin",
"displayName": "myFirstPlugin",
"description": "",
"version": "0.0.1",
"publisher": "jeremy_hxj",
"engines": {
"vscode": "^1.54.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:myfirstplugin.helloWorld"
],
"main": "./dist/extension.js",
"contributes": {
"commands": [
{
"command": "myfirstplugin.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
...
},
"devDependencies": {
...
}
}
激活事件
激活事件是在package.json
中的activationEvents
字段声明的一个JSON对象。当激活事件触发时, 插件就会被激活. 下面是可用的激活事件列表:
package.json
的配置项都可以在插件清单中找到.
我们现在插件清单中的激活事件就是 onCommand
,会在调用命令时激活。
"activationEvents": [
"onCommand:myfirstplugin.helloWorld"
],
发布内容配置
发布内容配置(即 VS Code 为插件扩展提供的配置项)是pacakge.json
插件清单的contributes
字段,你可以在其中注册各种配置项扩展 VS Code 的能力。下面是目前可用的配置项列表:
configuration
commands
menus
keybindings
languages
debuggers
breakpoints
grammars
themes
snippets
jsonValidation
views
viewsContainers
problemMatchers
problemPatterns
taskDefinitions
colors
typescriptServerPlugins
我们现在插件清单中的发布内容配置了Hello World
命令
"contributes": {
"commands": [
{
"command": "myfirstplugin.helloWorld",
"title": "Hello World"
}
]
},
F5
运行后就可以在命令面板中找到这个命令,调用后就会激活事件onCommand:myfirstplugin.helloWorld
插件入口文件
src/extension.ts
插件入口文件会导出两个函数,activate
和 deactivate
,你注册的激活事件被触发之时执行activate
,deactivate
则提供了插件关闭前执行清理工作的机会。
vscode
模块包含了一个位于node ./node_modules/vscode/bin/install
的脚本,这个脚本会拉取package.json
中engines.vscode
字段定义的VS Code API。这个脚本执行过后,你就得到了智能代码提示,定义跳转等TS特性了。
import * as vscode from 'vscode';
// 一旦你的插件激活,vscode会立刻调用下述方法
export function activate(context: vscode.ExtensionContext) {
// 下面的代码只会在你的插件激活时执行一次
console.log('Congratulations, your extension "myfirstplugin" is now active!');
// 入口命令已经在package.json文件中定义好了,现在调用registerCommand方法
// registerCommand中的参数必须与package.json中的command保持一致
let disposable = vscode.commands.registerCommand('myfirstplugin.helloWorld', () => {
vscode.window.showInformationMessage('Hello World from myFirstPlugin!');
});
// 在插件上下文中订阅
context.subscriptions.push(disposable);
}
// 插件卸载
export function deactivate() {}
这样,我们的第一个基础插件,流程就清晰了:
- 注册
onCommand
激活事件:onCommand:myfirstplugin.helloWorld
,所以用户可以在调用myfirstplugin.helloWorld
命令后激活插件。 - 使用
contributes.commands
发布内容配置,绑定一个命令IDmyfirstplugin.helloWorld
,然后Hello World
命令就可以在命令面板中使用了。 - 使用
commands.registerCommand
VS Code API 将一个函数绑定到你注册的命令IDmyfirstplugin.helloWorld
上。
所以,当我们在命令面板中调用Hello World
命令后,就会出现这样的信息提示: