第一个 Visual Studio Code 插件项目 [First VScode Extentions]

• 你的第一个VScode插件项目 [First VScode Extentions]
  
  • 准备工作
  • 制作一个Hello World插件
    
    • 打开工程
    • 简单解释package.json

用了vscode1.3版本后,加上众多的语言支持插件，你一定会觉得vscode太强大。

想不想自己为自己的vscode写个插件呢。马上跟我一起开始吧。

以下内容参考vscode官网的doc
你可以在里面找到你想要的全部内容。

准备工作

首先你需要一个代码自动生成器Yeoman,和对应的vscode的
generator，你可以在命令行中输入：

npm install -g yo generator-code

前提是你安装了node.js的环境，才能使用它的npm功能。

这个过程比较漫长，大概需要十几分钟，安装完毕后，在命令行输入:

yo 

然后在弹出的菜单中用上下键选择code,如图所示：

选择完毕后，弹出几个选项，和一个小人，因为vscode完美支持typescript，所以我们就选它了，

之后我的选择是如下所示：

然后它就会在命令行对应的目录下面生成一个插件文件夹C:\Users\username\testEx，所有所需文件都已经在里面

至此准备工作已经完成！

制作一个Hello World插件

打开工程

在vscode中选择打开文件夹，即可打开插件工程。里面最重要的几个文件是package.json和
src文件夹下的extension.ts。

简单解释package.json

如果看的不太懂可以参考官方文档

在这个文件中定义了插件程序的激活方式和程序的入口，我们略过不重要的部分，
看下面这段设置：

{
    "activationEvents": [
        "onCommand:extension.sayHello"
    ],
    "main": "./out/src/extension",
    "contributes": {
        "commands": [{
            "command": "extension.sayHello",
            "title": "Hello World"
        }]
    },
}

其中main属性，指明了插件入口在哪个文件里，一般是输出后的extension
文件。

activationEvents属性指明了这个插件，会被哪些“命令”激活，在这里是说，被”extension.sayHello”
这个命令激活，插件一定是在被激活之后才能使用。

这个地方可能比较难理解，没有关系，我们再看下面的commands
它定义了外部——也就是用户如何触发相应的命令，这里的意思是，当你按F1弹出的输入行中，输入”Hello Wrold”
，并选择，就会触发”extension.sayHello”这个命令。

这个时候你的疑问也许是，“extension.sayHello”是什么命令，怎么定义的。

注册你自己的命令

在vscode内部事先定义了很多命令，都是用字符串注册的，这些命令你可以通过vscode.commands.getCommands()
得到，我打印过一次内部的命令字符串:

cursorLeft
cursorLeftSelect
cursorRight
cursorRightSelect
cursorUp
cursorUpSelect
cursorDown
cursorDownSelect
cursorPageUp
cursorPageUpSelect
cursorPageDown
cursorPageDownSelect
cursorHome
...

大概就像这样，vscode允许你注册自己的命令，就像extension.ts代码中写的那样：

let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
        // 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!');
    });

你自己注册的命令实现的功能就是后面那个lamda表达式，弹出一个消息框显示”Hello World!”消息。

调试你的插件

在vscode中调试插件非常简单，直接在右边的debug模式下运行即可，记得你的插件的激活方式吗？
按F1打开命令栏，输入”Hello World”,选择即可。

这样你的插件就可以使用了！

发布安装你的插件

插件制作完后，想要使用怎么办，一是参照官网的说明发布到网站上，这样别人搜索你的插件就可以下载了。
如果是自己和朋友之间使用的话，就用打包工具vsce打包成.vsix。

首先安装vsce。

npm install -g vsce

然后执行命令

vsce package

执行完毕后，你可以在目录下看见.vsix文件，用vscode !文件->打开文件 的方式打开.vsix，插件就会自动安装
插件的路径就在C:\Users\username\.vscode\extensions文件夹下。

结语

大部分的问题可以在官方文档中得到答案，还是有些细节问题不很明白的我们一起努力解决。