vscodeextension插件开发详解
最近公司要使⽤vscode作为开发⼯具，需要对vscode做⼀些定制功能，⽐如snippet提⽰，内容提⽰，以及其他插件集成等，为此做了⼀些调查，并做了⼀定的开发与⽀持。
上⾯是vscode官⽅提供的extension开发帮助，按照上⾯的步骤基本上可以做简单的demo事例
如下主要介绍下⾃⼰在开发中做的⼏个简单功能：
1. Snippet
感觉vscode的snippet功能真的很强⼤，只要编辑相应的json配置⽂件，在⽂档编辑过程中的各种提⽰应有尽有，在vscode的market上，也可以到各种后缀格式的⽂件的配置。
snippet的配置很简单，只需要配置对应的json⽂件就可以了
{
/*
// Place your snippets for C++ here. Each snippet is defined under a snippet name and has a prefix, bod
y and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix":"log",
"body":[
"console.log('$1');",
"$2"
],
"description":"Log output to console"
}
*/
}
snippet可以通过两种⽅式添加：
1.1 通过vscode->⾸选项-->⽤户代码段
通过这种⽅式等于是通过配置⾃⼰本地的代码⽚段，⽽且只能在本机使⽤。
1.2 通过开发snippet的extension
对于开发snippet的extension很简单，配置好vscode extension的⼯程结构，只需要在package.json⽂件中的contributes--
>snippets即可，配置上⾃⼰写的json⽂件或者添加从第三⽅获取到的json⽂件即可。
"contributes": {
"snippets": [
{
"language": "cpp",
"path": "./snippets/snippets.json"
}
],
}
通过这种⽅式，把插件打包发布以后，可以轻松的共享给⾃⼰的⼩伙伴们，对于snippet的扩展很⽅便。
2. registerCommand
在vscode的插件开发，最基础的就应该算是command了，在功能命令，右键菜单，menu， keybindings等都和command相关，所以在做这些功能之前，⾸先需要⾃⼰注册⼀个command进去。
// this method is called when your extension is activated
vscode代码规范// 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 ()
// This line of code will only be executed once when your extension is activated
console.log('Congratulations, your extension "demoCmd" 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 demoCmd= isterCommand('extension.demoCmd', () => {
// The code you place here will be executed every time your command is executed
});
context.subscriptions.push(demoCmd);
}
// this method is called when your extension is deactivated
export function deactivate() {
}
这个也是整个插件的⼊⼝，上例⼦中定义了⼀个extension.demoCmd的cmd，对于上⾯说的⼀些定制功能，都需要通过这个cmd 在package.json中配置。
注：如下的命令和配置都是在package.json中的contributes属性
2.1 注册命令
注册命令与其名称，注意此处的command必须与上门代码中的cmd名称⼀致。
"commands": [{
"command": "extension.demoCmd",
"title": "demoCmd"
}],
注册了这个命令，就可以通过vscode在F1弹出的窗⼝中输⼊命令，到⾃⼰刚刚注册的cmd
但是如果添加⼀个快捷键是不是会更⽅便呢？
2.2 command添加keybindings
"keybindings": [{
"command": "extension.demoCmd",
"key": "ctrl+shift+a",
"mac": "ctrl+shift+a",
"when": "editorTextFocus"
}],
此处注册⼀个ctrl+shift+a的快捷键调⽤我们注册的cmd，添加了以后，可以通过快捷键试试效果，是不是⽐在F1中输⼊命令到对应的cmd⽅便多了。
2.3 command添加menu
注册了快捷键，是⽅便了，但是对于很多⽤户来说，有⼀个menu按钮或者有⼀个右键菜单是不是更⽅便呢？
"menus": {
"editor/context": [
{
"when": "resourceLangId == cpp",
"command": "extension.demoCmd",
"group": "navigation"
}],
"editor/title": [{
"when": "resourceLangId == cpp",
"command": "extension.demoCmd",
"group": "navigation"
}]
如上，提供了两种⽅式添加menu，editor/context：⿏标右键菜单
editor/title：菜单栏按钮
2.4 setting.json配置提⽰
刚才说了snippet⽂件内容提⽰，但是对于插件开发来说，很有可能需要⽤户配置⼀些本机的环境或者参数之类的变量，对于这个名称格式的提⽰也是很有必要的，省的⽤户配置错误。
"configuration": {
"type": "object",
"title": "demoCmd configuration",
"properties": {
"ding": {
"type": "string",
"default": "utf-8",
"description": "default file encoding"
}
}
},
配置了这个，在⽂件-->⾸选项-->设置的编辑页⾯中，就会提⽰我们刚才配置的属性。此处对于类型，默认值，类型校验都很有作⽤，可以⽅便⽤户配置参数并且减少输⼊错误率。
3. ⼀些⾼阶⽤法
在2. registerCommand中的activate中我们除了registerCommand还可以注册⼀些其他的事件.
如下给⼀个CompletionItemProvider的例⼦
3.1 CompletionItemProvider
vscode除了最基础的snippet提⽰，还有另外⼀种通过CompletionItemProvider实现的提⽰功能。
// 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) {
let demoProvider = new demoProvider();
let cppPv = isterCompletionItemProvider("cpp", demoProvider);
context.subscriptions.push(cppPv);
}
// this method is called when your extension is deactivated
export function deactivate() {
}
export class demoProvider implements vscode.CompletionItemProvider{
public provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken): vscode.CompletionItem[]{      var completionItems = [];
var completionItem = new vscode.CompletionItem("aaa");
completionItem.kind = vscode.CompletionItemKind.Snippet;
completionItem.detail = "aaa";
completionItem.filterText = "bbbb";
completionItem.insertText = new vscode.SnippetString("aaaa$1bbbb$2cccc");
completionItems.push(completionItem);
return completionItems;
}
public resolveCompletionItem(item: vscode.CompletionItem, token: vscode.CancellationToken): any{
return item;
}
dispose(){
}
}
类似的还有CodeActionsProvider，HoverProvider，CodeLensProvider等。
3.2 insertSnippet
在vscode的新版本中，提供了⼀个insertSnippet⽅法，⽤于插⼊snippet类型格式内容，通过这种⽅法插⼊的可以使⽤snippet的
格式，例如$1这种tab跳转等。
private editSnippet(text : string ) {
let editor = vscode.window.activeTextEditor;
let selection : vscode.Selection = editor.selection;
let insertPosition = new vscode.Position(selection.active.line, 0);
editor.insertSnippet(new vscode.SnippetString(text), insertPosition);
}
注意，在vscode低版本中，可能不存在这个功能。
3.3 OutputChannel
OutputChannel主要⽤于打印输出信息到vscode的输出控制台。
let out:vscode.OutputChannel = ateOutputChannel("iAuto3 RunScript");
out.show();
out.appendLine("deom");
类似的还有StatusBarItem，Terminal，TextEditorDecorationType等。
4. 打包发布
这个就参考官⽅的发布⽅法，再次提⽰⼀点，以为如果是公司内部开发，有些东西是不能对外提交发布的，所以可以考虑只打包，通过本地安装
vsce package
⾃⼰打包以后，把打包完成的*.vsix内⽹发布出去，可以让同事们通过 <b>从VSIX安装</b>
⼩结：
随着web发展，vscode使⽤范围在扩⼤，从extensions market市场上也可以发现，各种功能的插件基本都很齐全，特别是snippet 这⼀块，cpp， ruby，react，angular等都很⽐较齐全，可以很⼤的提⾼代码
编码速度，同时还可以通过各种提⽰校验等，提⾼代码质量。
同时vscode extensions 开发门槛不⾼，对于公司内部⽤于规范代码格式，提⾼代码质量，降低代码学习门槛都是⾮常有⽤的。以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。