使用VSCode 创建一个插件
VSCode创建一个插件，如何创建一个插件，VSCode的插件既然是一个Node.js应用，那么官方自然也会提供了基于NPM的工具链来帮助你创建和维护插件。
首先你需要的是yeoman，一个脚手架工具。通过yeoman你可以快速创建代码模板，如下所示：
npminstall-gyeoman
然后你需要安装VSCode的模板：
npminstall-ggenerator-code
有了脚手架，你就可以创建一个VSCode的插件模板了。接下来运行：
yocodemyextension
请注意，第三个参数将是你新创建的插件的文件夹名字。
由上图，你可以看到有七个插件模板：
前两个是通过编程来提供插件功能，你可以选择TypeScript或者JavaScript，结果都是类似的，因为TypeScript最后也需要被编译成JavaScript再发布；第三个是主题插件，你可以将你自己创建的主题分享给其他人；第四个是语言支持，也就是语法高亮、语言定义等；第五个是代码片段的分享；第六个则是分享快捷键；第七个就是对多个插件进行组合分享。
关于主题（ColorTheme）、快捷键（Keymap）、代码片段（CodeSnippet）的分享，我会在下一讲进行介绍。语言支持之后也会涉及。今天，我们先讲述第二个选项“NewExtension(JavaScript)”。
接下来，你会依次被提示输入插件的名字、介绍、想要用哪个账号发布、是否要打开typecheck以及是否要使用git等。你可以暂时按照我的样例进行输入，之后也可以再根据需要修改。
输入全部问题后，脚本就会自动地创建文件，安装需要的dependencies。全部结束后，脚本会提示你，可以运行下面的脚本打开这个插件的代码。
cdmyextensioncode.
VSCode的脚手架，默认为我们创建了不少的文件。不过像.gitignore、.eslintrc.json、README.md这些文件的作用想必你已经比较熟悉了。对于这个插件而言，最重要的是下面几个文件：
package.json我上面提到了，VSCode的插件就是一个Node.js的应用，package.json里记录了这个Node.js应用的信息。同时，插件的信息也会被记录在这个文件内。extension.js这个文件是当前插件的全部代码。.vscode脚手架工具已经为我们提供了调试配置、任务配置等，有了它们，我们就不用自己花时间书写了。
好了，下面我们来看看extension.js和package.json。看完它们，你就对VSCode插件是如何运行的有很好的理解的。
extension.js的内容在删除了所有的注释后，如下：
constvscode=require('vscode');
functionactivate(context){
console.log('Congratulations,yourextension"myextension"isnowactive!');
letdisposable=vscode.commands.registerCommand('extension.sayHello',function(){
vscode.window.showInformationMessage('HelloWorld!');
});
context.subscriptions.push(disposable);
}
exports.activate=activate;
functiondeactivate(){
}
exports.deactivate=deactivate;
第一，我们引用了vscode这个库。通过引用这个库，我们就能够使用VSCode的插件API了。
第二，我们创建了activate函数并且将其输出。VSCode的插件进程在激活这个插件时，就是调用这个被输出（export）的函数。也就是说，这个函数，就是这个插件的入口。
相对应的就是deactivate函数，当我们禁用这个插件或者关闭VSCode时，这个函数就会被调用了。
下面我们再来看看activate这个函数：
functionactivate(context){
console.log('Congratulations,yourextension"myextension"isnowactive!');
letdisposable=vscode.commands.registerCommand('extension.sayHello',function(){
vscode.window.showInformationMessage('HelloWorld!');
});
context.subscriptions.push(disposable);
}`
这个函数首先输出了log，告诉我们插件已经被成功激活了。接着，我们使用vscode.commands.registerCommand注册一个名为extension.sayHello的命令，这个命令的实现，是registerCommand的第二个参数，我们通过调用vscode.window.showInformationMessage，在界面上调出一个提示框，内容则是HelloWorld!。
不过，光有extension.js，这个插件是无法运行的。VSCode会根据条件来激活插件，而这个激活条件写在了package.json中，那么我们一起来看下package.json。
{
"name":"myextension",
"displayName":"myextension",
"description":"myextension",
"version":"0.0.1",
"publisher":"rebornix",
"engines":{
"vscode":"^1.29.0"
},
"categories":[
"Other"
],
"activationEvents":[
"onCommand:extension.sayHello"
],
"main":"./extension",
"contributes":{
"commands":[
{
"command":"extension.sayHello",
"title":"HelloWorld"
}
]
},
"scripts":{
"postinstall":"node./node_modules/vscode/bin/install",
"test":"node./node_modules/vscode/bin/test"
},
"devDependencies":{
"typescript":"^2.6.1",
"vscode":"^1.1.21",
"eslint":"^4.11.0",
"@types/node":"^8.10.25",
"@types/mocha":"^2.2.42"
}
}
上面这个文件，跟普通的npm的package.json只有三处不同。
第一处是engines。
"vscode":"^1.29.0"
它指定了运行这个插件需要的VSCode版本。比如“^1.29.0”就是说明，要安装运行这个插件必须要使用VSCode1.29及以上版本。
第二处是activationEvents。
"activationEvents":[ "onCommand:extension.sayHello" ]
这个属性指定了什么情况下这个插件应该被加载并且激活。在我们这个例子里，激活条件是，当用户想要运行“extension.sayHello”这个命令时，就激活这个插件。
这个机制能够保证，当我们需要使用这个插件的时候，这个插件才被激活，尽可能地保证性能和内存使用的合理性。
第三处是contributes。
"contributes":{
"commands":[
{
"command":"extension.sayHello",
"title":"HelloWorld"
}
]
},
这个属性指定了，我们这个插件给VSCode添加了一个command，这个command的id是“extension.sayHello”，跟extension.js中写的一样。而这个命令的名字，叫做HelloWorld。
如果不写这个属性的话，VSCode是不会把这个命令注册到命令面板中的，我们也就没法找到这个命令并且执行了。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。