vscode插件快餐教程(1) - 从写命令开始
大致从2017年开始，vscode就越来越流行。vscode能够流行起来，除了功能强大、微软不断升级给力之外，优秀的插件机制也是非常重要的一环。vscode中相当多的功能也是通过自身的插件机制实现的。
比起使用coffeescript为主要开发语言的atom IDE，vscode使用越来越有王者气质的typescript做为主要的开发语言，这也为vscode插件开发提供了良好的助力。
随着插件机制的不断完善，文档、示例与脚手架工具等也日渐成熟。相关的文章与教程也非常丰富，现在写vscode的plugin已经是件比较容易的事情了。
自己的业务开发，只有自己最了解，作为程序员，写自己的plugin来加速自己的开发效率，现在正是好时机。
vscode的plugin种类非常丰富，我们先从最传统的定义新命令说起吧。
使用脚手架生成骨架
与其他主流前端工程一样，我们通过脚手架来生成插件的骨架。微软提供了基于脚手架生成工具yeoman的脚本。
我们通过npm来安装vscode plugin脚手架：
npm install -g yo generator-code然后我们就可以通过yo code命令来生成vscode plugin骨架代码了。
yo code脚手架会提示选择生成的plugin的类型：
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? (Use arrow keys)
New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack 我们就选择New Extension (Typescript)。关于其他选择我们后面的文章会继续介绍。
我们从最简单的移动光标开始做起吧。比如写一个将光标移动到编辑区首，比如一篇文章或代码的首部，用emacs的命令叫做move-beginning-of-buffer。
光标移动命令实践
同是编辑器，都有相似的功能。这种移动到文章首的功能，肯定不用我们自己开发，vscode早就为我们做好了。在vscode中定义了一大堆光标控制的命令，比如这条就叫做cursorTop。
- cursorTop: 移动到文章首
- cursorBottom: 移动到文章尾
- cursorRight: 光标向右移，相当于emacs的forward-char
- cursorLeft: 光标左移，相当于emacs的backward-char
- cursorDown: 向下移一行，相当于emacs的next-line
- cursorUp: 向上移一行，相当于emacs的previous-line
- cursorLineStart: 移至行首，相当于emacs的move-beginning-of-line
- cursorLineEnd: 移至行尾，相当于emacs的move-end-of-line
我们新建一个move.ts，用于实现光标移动的功能。我们先以移动到文章首为例。我们通过vscode.commands.executeCommand函数来执行命令。
例:
import * as vscode from 'vscode';
export function moveBeginningOfBuffer(): void {
vscode.commands.executeCommand('cursorTop');
}在主文件extension.ts中，我们先把move.ts这个包引入进来：
import * as move from './move';然后在activate函数中，注册这个命令：
let disposable_begin_buffer = vscode.commands.registerCommand('extension.littleemacs.moveBeginningOfBuffer',
move.moveBeginningOfBuffer);
context.subscriptions.push(disposable_begin_buffer);最后我们在package.json中给其绑定一个快捷键。'<'和'>'在键盘中是上排键，我们就不用它们了，比如绑定到alt-[上。
修改contributes部分如下：
"contributes": {
"commands": [{
"command": "extension.littleemacs.moveBeginningOfBuffer",
"title": "move-beginning-of-buffer"
}],
"keybindings": [{
"command": "extension.littleemacs.moveBeginningOfBuffer",
"key": "alt+["
}]
}大功告成。我们用F5来启动调试，就会启动一个新的vscode界面。
我们在新开的vscode界面，打开命令窗口（F1或shift-cmd-p），输入move-beginning-of-buffer就可以看到这个命令了：
我们可以移到文件中间的位置，按alt+[就会回到文件头。
目前完整的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';
import * as move from './move';
// 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 "littleemacs" 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_begin_buffer = vscode.commands.registerCommand('extension.littleemacs.moveBeginningOfBuffer',
move.moveBeginningOfBuffer);
context.subscriptions.push(disposable_begin_buffer);
}
// this method is called when your extension is deactivated
export function deactivate() {
console.log('Plugin deactivated');
}对应的完整package.json为：
{
"name": "littleemacs",
"displayName": "littleemacs",
"description": "Some operations just like emacs",
"version": "0.0.1",
"engines": {
"vscode": "^1.33.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:extension.littleemacs.moveBeginningOfBuffer"
],
"main": "./out/extension.js",
"contributes": {
"commands": [{
"command": "extension.littleemacs.moveBeginningOfBuffer",
"title": "move-beginning-of-buffer"
}],
"keybindings": [{
"command": "extension.littleemacs.moveBeginningOfBuffer",
"key": "alt+["
}]
},
"scripts": {
"vscode:prepublish": "yarn run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"postinstall": "node ./node_modules/vscode/bin/install",
"test": "yarn run compile && node ./node_modules/vscode/bin/test"
},
"devDependencies": {
"typescript": "^3.3.1",
"vscode": "^1.1.28",
"tslint": "^5.12.1",
"@types/node": "^10.12.21",
"@types/mocha": "^2.2.42"
}
}一个插件实现多条命令
一个不够，我们再写一个：
activate函数：
let disposable_begin_buffer = vscode.commands.registerCommand('extension.littleemacs.beginningOfBuffer',
move.beginningOfBuffer);
let disposable_end_buffer = vscode.commands.registerCommand('extension.littleemacs.endOfBuffer',
move.endOfBuffer);
context.subscriptions.push(disposable_begin_buffer);
context.subscriptions.push(disposable_end_buffer);功能实现函数：
import * as vscode from 'vscode';
export function beginningOfBuffer(): void {
vscode.commands.executeCommand('cursorTop');
}
export function endOfBuffer() {
vscode.commands.executeCommand('cursorBottom');
}package.json:
"activationEvents": [
"onCommand:extension.littleemacs.beginningOfBuffer",
"onCommand:extension.littleemacs.endOfBuffer"
],
"main": "./out/extension.js",
"contributes": {
"commands": [{
"command": "extension.littleemacs.beginningOfBuffer",
"title": "beginning-of-buffer"
},
{
"command": "extension.littleemacs.endOfBuffer",
"title": "end-of-buffer"
}
],
"keybindings": [{
"command": "extension.littleemacs.beginningOfBuffer",
"key": "alt+["
},
{
"command": "extension.littleemacs.endOfBuffer",
"key": "alt+]"
}
]
},
