这期从最简单的hello world(其实就是实例代码)开始
vscode插件开发现在有非常方便的脚手架工具,直奔主题地:
npm install -g yo generator-code
安装这两个依赖,然后使用官方的脚手架工具
yo code
会自动生成一个带hello world的demo插件工程。直接f5就可以运行了。vscode会打开一个新的窗口专门给这个插件调试用,ctrl+shift+p之后可以输入指令hello world,就会弹出一个hello world的提示。
那么这个项目的代码和vscode干了什么呢?首先看vscode看了什么:
f5之后vscode会生成.vscode文件夹,会有extensions.json launch.json settings.json tasks.json四个文件。这些文件会规定vscode在f5的时候干些什么,总的来说就是干两件事:
第一件是运行yarn run compile,这会在根目录下生成一个out/的文件夹,其中是项目的编译结果
另一个就是打开一个新的专门给插件用的vscode窗口,并且在这个窗口中启用项目的插件
再看代码本身:代码逻辑在src/extension.ts中:
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log('Congratulations, your extension "my-plugin" is now active!');
// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('my-plugin.helloWorld', () => {
// The code you place here will be executed every time your command is executed
// Display a message box to the user
vscode.window.showInformationMessage('Hello World from my-pluginmmm!');
});
context.subscriptions.push(disposable);
}
具体的api暂且不说,可以直观地看到是注册了一个指令叫'my-plugin.helloWorld',当输入这个指令时会弹出一个提示。那么这个指令的名字是怎么和“hello world”对应的呢?这就是在package.json中可以看到的设置:
"activationEvents": [
"onCommand:my-plugin.helloWorld"
],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "my-plugin.helloWorld",
"title": "Hello World"
}
]
},
可以看到activationEvents中规定了一个事件:onCommand:my-plugin.helloWorld。onCommand表示命令激活,也就是从ctrl shift p进入的时候激活的(当然还有别的激活方式)。下面则有对命令的具体定义,可以看到my-plugin.helloWorld有一个title Hello World也就是在指令菜单中实际输入/看到的那个名字。输入Hello World会触发my-plugin.helloWorld指令,而这个指令的事件则定义在extension.ts中,可以看到这样整个逻辑就捋通了。