先打个广告，我自己开发的vscode插件Create-Easy已经上线vscode扩展商店了，点击Create-Easy，或者在vscode的扩展中搜索即可使用。这个扩展主要是方便创建文件和文件夹，一开始我的设计思路是只支持快捷创建vue文件，创建好后直接注入模板（template，script，style）。后来参考了几个vscode的扩展，比如create-file-folder，决定还是以创建文件夹和文件为主要方向，同时支持多种文件格式内部注入模板，在功能上也可以和其它同类型的扩展得以区分。
OK，简单介绍后开始说正文。
一. 安装
目前，微软提供了开发扩展的脚手架，只需要执行：
npm install -g yo generator-code
注意，脚手架会自动为你执行npm install 或者 yarn，但是速度非常慢，这边建议取消install后手动cnpm install来进行安装。
二. 起步
安装完毕后，按下F5或者打开vscode调试模式并运行进入到扩展宿主开发环境，按ctrl+shift+p后，输入Hello World就可以看到脚手架为我们提供示例的弹窗。
接下来我们看代码，脚手架为我们提供的代码核心是extension.js和package.json两个文件，前者是入口文件，后者是依赖以及配置文件，而在package.json文件中，最重要的配置就是activationEvents和contributes；
activationEvents是用来控制触发事件（官方称为Activation Event）的，示例中，控制条件是onCommand，即'ctrl+shift+p'，接下来输入指令就可以触发插件了；除了onCommand以外，官方还提供了诸如onLanguage，onDebug，onUri等事件；
contributes是用来扩展vscode方法的配置，在示例中，注册了commands，也就是说配置了一个命令，my-test.helloworld，在activationEvents也是配置的这个命令，而title则是这个命令在vscode正式环境中使用的名称，也就是用户使用时的名称。而my-test.helloworld是在编写代码时的命令名称。除了commands外，vscode还支持注册menus，keybindings，languages等多个配置，更多配置可以点击Contributes Point来查看。
接着，我们来看extensions.js文件。
function activate(context) {
// 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 "my-test" 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('my-test.helloWorld', function () {
// 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 my-test!');
});
context.subscriptions.push(disposable);
}
文件的核心代码只有这些，vscode.commands.registerCommand注册之前我们在package.json中配置的命令，回调函数则是触发这个命令后执行的核心逻辑，示例中使用vscode.window.showInformationMessage调用了编辑器的弹窗。
三. 动手实现一个
这回我们实现一个简单的功能，使用命令创建一个HTML文件，同时让它内部生成好需要的HTML代码。
1. 修改命令名称
在package.json中，我们修改'contributes中command的title，将Hello World改成create html，这样我们就可以在ctrl+shift+p中使用create html命令来执行我们的代码了。
2. 在extension.js中引入fs和path，删除函数中vscode.window.showInformationMessage的代码，接着创建html的默认内容
function activate(context) {
let disposable = vscode.commands.registerCommand('my-test.helloWorld', function () {
const content = `<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
`
});
context.subscriptions.push(disposable);
}
3. 创建文件
最后一步，只需要用fs写入文件就可以了：
function activate(context) {
let disposable = vscode.commands.registerCommand('my-test.helloWorld', function () {
const content = `<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
`
const uri = vscode.workspace.workspaceFolders[0].uri.fsPath
console.log(uri)
fs.writeFile(path.join(uri, 'index.html'), content, (err) => {
if (err) vscode.window.showErrorMessage('创建失败')
vscode.window.showInformationMessage('创建成功')
})
});
context.subscriptions.push(disposable);
}
vscode.workspace.workspaceFolders[0].uri.fsPath是用来获取当前工作区的第一个文件夹的绝对路径，如果你一个工作区有多个项目，可以通过workspaceFolders数组来进行控制；
四. 发布
首先安装vsce，npm install -g vsce，接着去azure创建账号，创建成功后如图：
然后点击用户设置，点击personal access token创建令牌
创建成功后记得保存令牌；
接下来执行vsce publisher 创建发布者，这里需要输入刚才的令牌；
接着修改你的readme文件，最后执行vsce publish就成功发布了。
本文同步发布于：shreddedbutter.com
