一。前言
前一阵子被沈哥的一手mocha单测插件惊呆了，感觉帅的妙不可言，就萌生了自己去探索一下VScode插件开发流程的想法。
为啥子一只小前端要自己去开发VSCode插件呢？
借用沈哥(alek)的话说就是：一般是开发效率低 -> 发现可提升效率的点 -> 然后就去查插件文档 -> 产出。
二。插件开发
开发前你先确保你有vscode哦，再有个node
1. 安装vscode插件生产工具：（可理解为脚手架，就比如 vue-cli, create-react-app）命令行如下
npm install -g yo generator-code
官方推荐使用Yeoman 和 VS Code Extension Generator。
npm太慢了，直接cnpm了。
2.使用脚手架初始化项目：（先自己创建个文件夹，cd进去） 命令如下：
yo code
（如果安装权限不够，直接sudo）
下面跟着命令创建项目就行了，我选择的是typescript
安装依赖也完成后，项目目录结构如下：
最重要的文件就两个：src/extension.ts 和 /package.json
src/extension.ts ： 插件开发功能模块的编写。
/package.json ： 命令行运行的命令，管理插件功能。
基本整个插件编写都是围绕着这两个文件来修改的。
首先，进入src/extension.ts中一探究竟
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
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 "comment-center" 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('comment-center.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 comment center!');
});
context.subscriptions.push(disposable);
}
// this method is called when your extension is deactivated
export function deactivate() {}
在代码块中，最重要的是下面这部分，这就是一个小功能模块，名为comment-center.helloWorld
vscode.window这个是我们运行插件时，右下角的小窗口提示。
现在我们可以尝试运行一下我们的初始化插件。在debug中进行调试，会出现一个新的窗口
command+ shift + P 快速打开命令运行，输入hello 找到 "Hello World" 命令，即为运行我们的Hello world命令事件。
你会看到右下角弹出信息窗口，
即我们上面提过的 vscode.window.showInformationMessage('Hello World from comment center!');
这里仅仅用到了src/extension.ts。 别急，/package.json 马上就登场了。
这是项目默认提供的命令事件，可以修改，下面我们进行尝试，注册新的命令事件。
三。注册命令事件
我们先简单说说哦：package.json中有vscode的自定义配置，在执行打包命令时vscode会自检，如果配置错误或者遗漏会有提示信息。
那我们先开发一个 "commitFirst"的新功能吧，功能就是简单的右下角弹出窗口提示一下。
功能开发完毕，下面进入package.json中进行命令注册。
我们需要找到两个配置，进行注册新的命令事件。
activationEvents 配置中 添加命令行"onCommand:comment-center.commitFirst"
contributes 配置中的commands选项，添加命令
尝试一下运行咱们的新功能，这次快捷键选择 Hello commentFirst命令，很成功的预期显示弹窗了.
四。插件发布
两种方式，第一种是官方的，但是可能对网络要求比较高，我一直卡着。
第二种打包成 .vsix 的插件，然后可以上传网络分享，也可以直接和好友传送使用。
同时添加点信息，防止警告：
"license": "SEE LICENSE IN LICENSE.txt",
"bugs": {
"url": "https://github.com/sxei/vscode-plugin-demo/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/sxei/vscode-plugin-demo"
},
"homepage": "https://github.com/sxei/vscode-plugin-demo/blob/master/README.md"
还要修改下readme.md，删除readme中开头的部分，不然不让你打包。
1.跟npm包发布差不多。先安装一手打包工具
npm install -g vsce
工具在手，打包我有，进入目录，运行盘它
vsce publish
然后，没有然后，gg了
打开微软网址，github关联一下，配置Personal Access Token。我这可能网不是很好，然后搞不定。
如果你喜欢这种方式，详情查看 code.visualstudio.com/api/working…
2. 打包成 .vsix 的插件
vsce package
非常成功，如下
上传分享的话打开这个网页就行：marketplace.visualstudio.com/manage/publ…
选择，下拉框的中间选项：Visual Studio Code
打开VSCode扩展商店，就可以看到你的插件了
开发VSCode插件可能需要用到API，官网查阅即可：code.visualstudio.com/api/referen…
