VSCcode插件极简开发指南
前言
俗话说得好，懒惰使人进步
最近用hexo搭建了一个静态博客，不过发现每次写完总要打三个命令
hexo clean
hexo g
hexo d
像我这么懒的人显然是无法接受每次都要这样干的，所以我就干脆写了一个shell script，但毕竟每次还要在terminal里面输，还是太麻烦了Orz，所以就觉得干脆写一个VSCode的小插件来解决这个问题（虽然我既不会Javascript也不会Typescript，QAQ）
还是在开头放一个Github的链接好了。
准备
像Node.js和npm什么的肯定是要的了（虽然我不知道他们是干啥用的QWQ），先安装这两个东西：
npm install -g yo
npm install -g generator-code
然后就输入启动yo code之后就会有一大堆可以选择的东西（这里我偷懒就直接copy and paste 官网的东西了）
yo code
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###
# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm
code ./helloworld
用VSCode打开刚建立的文件夹之后就可以继续了。
目录结构大概长这样：
.
├── CHANGELOG.md
├── README.md
├── extension.js
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── test
└── vsc-extension-quickstart.md
我们要关注的大概就只有extension.js和package.json这两个文件（如果只是写一个小插件偷一下懒的话）
开始
打开extension.js之后应该是张这样的（别被吓到，大部分是注释）
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
/**
* @param {vscode.ExtensionContext} context
*/
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 "helloworld-minimal-sample" 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('extension.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!');
});
context.subscriptions.push(disposable);
}
// this method is called when your extension is deactivated
function deactivate() {}
module.exports = {
activate,
deactivate
}
然后另外一个就是package.json，这里直接我copy helloWorld的sample
{
"name": "helloworld-sample", //插件名称
"displayName": "helloworld-sample", //发布后展示的名称
"description": "HelloWorld example for VS Code", //介绍
"version": "0.0.1", //版本
"publisher": "vscode-samples", //发布者的名字，这个一开始是没有的，但一定要加上去！
"repository": "url", //repo的连接这个也要写上
"engines": {
"vscode": "^1.25.0"
},
"categories": [ //类别
"Other"
],
"activationEvents": [
"onCommand:extension.helloWorld" //命令，这个要和extension.js里面的对应才有用
],
"main": "./out/extension.js",
"contributes": { //这里面的东西会出现在插件页面“贡献”那一栏上
"commands": [
{
"command": "extension.helloWorld",
"title": "Hello World"
}
]
},
...
}
可以看到json里面的extension.helloWorld和js里面... vscode.commands.registerCommand('extension.helloWorld' ...是相对应的，也就是说如果要添加什么事件，在json里面加完之后，如果主程序的函数必须要与其相对应。
那我们就现在开始添加自己需要的东西了。因为我把插件命名为了hexo-one，所以也顺便将其改为这个。
...
"publisher": "Meowcolm024",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://meowcolm024.visualstudio.com/DefaultCollection/VSCode%20Extension/_git/hexo-one"
},
...
"activationEvents": [
"onCommand:hexo-one.pushHexo",
"onCommand:hexo-one.newPost"
],
...
"contributes": {
"commands": [
{
"command": "hexo-one.pushHexo",
"title": "Push Hexo"
},
{
"command": "hexo-one.newPost",
"title": "New Hexo Post"
}
],
"keybindings": [ //快捷键
{
"command": "hexo-one.pushHexo",
"key": "ctrl+p ctrl+h"
},
{
"command": "hexo-one.newPost",
"key": "ctrl+n ctrl+p"
}
]
},
也就是要把publisher加上（这个后面再说），还有repo的地址，我们同时可以事件加上快捷键。这样package.json部分就算完成了
然后我们回到extension.js里面。（虽然不会JavaScript，但照葫芦画瓢还是可以的）。我们要做的只不过是让插件帮我们执行几个命令，所以可以先写一个执行系统命令的函数（这个还是可以Google到的）
function runCmd(cmd) {
const {workspace} = require('vscode');
const options = {
cwd: workspace.rootPath, // 要把路径设定到工作区才行
env: process.env
}
const { exec } = require('child_process');
exec(cmd, options, (err, stdout, stderr) => {
if(err) {
console.log(err);
return;
}
console.log(`stdout: ${stdout}`);
console.log(`stderr: ${stderr}`);
vscode.window.showInformationMessage(stdout); // 这一行是给vscode的输出
})
}
然后我们回到上面function active(context) 那里，找到他们已经给我们准备好的一个函数，稍作修改即可：
let disposable = vscode.commands.registerCommand('hexo-one.pushHexo', function () {
runCmd('hexo clean \n hexo g \n hexo d');
vscode.window.showInformationMessage('Deploying Hexo, please wait...');
});
context.subscriptions.push(disposable);
想要偷懒的的话，也可以直接copy and paste这一段然后稍作修改作为我们另外一个Event的函数：
let disposable2 = vscode.commands.registerCommand('hexo-one.newPost', function() {
const options = {
ignoreFocusOut: true,
password: false,
prompt: "Please type the title of your post"
};
// 这里稍微用到了VSCode的API，基本上就是弹出输入框然后检测内容是否为空，然后再执行相应的命令
vscode.window.showInputBox(options).then((value) => {
if (value === undefined || value.trim() === '') {
vscode.window.showInformationMessage('Please type the title of your post');
}else{
const title = value.trim();
const cmd = "hexo new \"" + title + "\""
runCmd(cmd);
}});
});
context.subscriptions.push(disposable2);
(这里很明显是偷懒了，直接加一个“2”完事)
到了这里基本上就已经完事了，然后我们需要打包发布（当然还要先创建一个publisher）。
不过我们还是要先安装：
npm install -g vsce
然后输入
vsce create-publisher xxxxxx #一个名字，然后按照后面的instructions就是了
# Publisher human-friendly name: xxx xxx
# Email: xxx@xxx.com
# Personal Access Token: *.... （这里是一个比较tricky的部分）
关于那个Personal Access Token，需要在Visual Studio Team Services里面注册/登陆之后找到Security那里新建一个Token，选择All accessible organizations，而Scopes里面则要勾选Marketplace中所有的项目，详细的话参见这个链接。
然后我们可以干这些事了：
vsce package #如果你想生成本地插件的文件的话（当然不生成也行）
vsce publish #将插件发布到VSCode的Marketpla上面
到这里最简单的应该就搞定了，如果想具体参考一下我这个extension的话，那我就把Github的链接放在这里。
orz 简书的json和bash居然没有syntax highlighting
先写这么多吧到时候有时间再补详细点
