VS Code插件开发初步

上手

欲善其事必先利其器，无论做什么开发，第一步肯定是下载工具链。VS Code开发主要用到两个东西，一个是项目的手脚架工具Yeoman，可通过yo来安装；另一个是VS Code的扩展时生成器generator-code，本文使用npm安装。

npm install -g yo generator-code

安装完成后，执行yo code指令，并根据提示，按部就班地生成项目，本文用的是js。

>yo code

其最后一个指令是，是否用VS Code打开项目，进入VS Code，点进左侧的运行和调试选项卡(快捷键Ctrl+Shift+D)，然后点击侧栏的Run Extension的绿色三角号，这时会弹出一个新的VS Code，在这个新的VS Code中按下F1，输入命令Hello World，从而右下角就会弹出Hello World弹窗，这就是自动创建项目的默认功能。

此外，开启项目的VS Code，还会在控制台输出

Congratulations, your extension "firstcode" is now active!

入口函数

在脚手架生成的代码中，有三个文件值得注意，分别是

• extension.js
• package.json

前者毫无疑问实现了Hello World代码，而后者貌似更加关键，因其包含了一个键值对

"main": "./extension.js"

正是这个键值对，表明extension.js文件是main文件，包含了插件的入口函数。

接下来进入这个js文件，来仔细研读一下这寥寥数行的代码。

const vscode = require('vscode');

function activate(context) {
	console.log('Congratulations, your extension "firstcode" is now active!');

	let disposable = vscode.commands.registerCommand('firstcode.helloWorld', function () {
		vscode.window.showInformationMessage('Hello World from firstCode!');
	});

	context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
	activate,
	deactivate
}

结合弹出窗口的蛛丝马迹，可以基本确定此文件的功能，其中registerCommand用于注册命令，这个命令的名称是firstcode.helloworld，在调用此命令之后，则通过showInformationMessage，在左下角弹出一个对话框。最后，通过exports将activve函数暴露除去，从而可被调用。

contributes

从实际的使用经验来说，我们在指令输入框中输入的是hello world，而非firstcode.helloworld，为此，只需继续关注package.json，就会发现contributes键下同时出现了二者，

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

由此，我们可以大胆猜测，package.json将Hello World暴露给我们，从而当我们在命令输入框中输入Hello World时，就会调用firstcode.helloWorld，进而触发extension.js中定义的函数，实现右下角的弹窗。

实际上，contributes中可供使用的功能不止于此，列表如下，这里面有些东西我也不知道是干嘛的，但仅就已经有了说明的条目而言，均能与日常操作相联系。

键	说明
breakpoints	断点
colors	主题颜色
commands	命令
configuration	配置
configurationDefaults	默认的特定于语言的编辑器配置
customEditors	自定义编辑器
debuggers	调试
grammars
iconThemes
jsonValidation	自定义JSON校验
keybindings	快捷键绑定
languages	新语言支持
menus	菜单
problemMatchers
problemPatterns
productIconThemes
resourceLabelFormatters
snippets	代码片段
submenus
taskDefinitions
themes	颜色主题
typescriptServerPlugins
views	左侧边栏
viewsContainers	自定义activitybar
viewsWelcome
walkthroughs