从零开始撸一个VS Code插件

VS Code插件开发初步

初始化

和js相比，VS Code更推荐用typescript进行插件开发，这样可以提高代码的稳健性和可维护性。但是从新建插件的角度来看，无非是在选择语言时，选定typescript而已。

> npm install -g yo generator-code
> yo code

除了使用TypeScript之外，插件名称为firstTS，初始化完成后，用Code打开项目。ts代码被存放在src文件夹里，内容如下，只有寥寥几行，功能就是注册一个名为firstts.helloWorld的命令，调用后在右下角显示提示信息"Hello World from firstTS!"。

import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
	let disposable = vscode.commands.registerCommand('firstts.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from firstTS!');
	});
	context.subscriptions.push(disposable);
}
export function deactivate() {}

在package.json中，contributes字典用于存放动作和响应的关系，内容如下，表示按下Ctrl+Shift+P后，输入Hello World命令，就会调用firstts中的helloWorld命令。

"contributes": {
  "commands": [
    {
      "command": "firstts.helloWorld",
      "title": "Hello World"
    }]}

右键菜单

Hello World插件除了作为初学者认识VS Code插件开发的窗口之外，就毫无意义了。为此，可以让右下角的信息弹窗显示一些更有意义的内容，比如当前文件的信息。为此需要引入fs模块

const fs = require('fs');

然后在activate函数中注册一个新的函数，用以获取文件信息，其逻辑与Hello World完全相同，唯一的区别，就是需要传入一个文件路径

vscode.commands.registerCommand("firstts.getState", uri=>{
const path = uri.path.substring(1);
fs.stat(path, (err:Error, stats:any) => {
	const size = stats.size;
	const createTime = stats.birthtime.toLocaleString();

	vscode.window.showInformationMessage(`
		文件大小:${size}字节;
		创建时间:${createTime}`);
});
});

有了这个文件路径，那么再像Hello World一样将其简单地放入commands列表，如下面这样，就会报错，因为这种注册方案，并不会提供一个文件路径。

{
  "command": "firstts.getState",
  "title": "Get State"
}

比较便捷的解决方案是，将其发布到右键菜单中，即在contributes键中添加下面的内容

"menus": {
  "editor/context": [
    {
      "when": "editorFocus",
      "command": "firstts.getState",
      "group": "navigation"
    }
  ]
}

其中，editor/context表示编辑器上下文菜单；when子键表示现实此菜单命令的时机；group为该命令所对应的菜单组，navigation表示在所有菜单的最顶端。效果如下

插件打包

插件开发的最后一步，就是打包，将其变成可供安装的文件，为此需要用到vsce工具

npm install -g vsce

安装成功之后，进入项目文件夹，即firstts，先将自动生成的readme.md文件中第一句话删掉，即删掉This is the README for your extension "firstts".

然后输入打包命令

vsce package

稍等片刻，文件夹下就会出现firstts-0.0.1.vsix文件了。

最后，安装这个打包好的vsix文件，在VS Code中按下快捷键F1，输入install from VSIX，在弹出文件对话框后，选中刚刚生成的firstts-0.0.1.vsix，会发现左侧的插件图标闪了一下，随后点击右键，就会出现刚刚创建的Get State命令了。