vscode 扩展开发从入门到颈椎病康复

vscode 扩展开发从入门到颈椎病康复

笔者从业以来，各路插件开发无算，而vscode把插件开发体验做到了极致。其开发体验，如沐春风，如丝般顺滑，经常写完了还想删掉再写一遍！

vscode扩展的内置脚手架细心且精致，一键生成后即可运行。vscode库类型完美，因此开发者可以仅通过IDE提示来猜到API，省去了很多文档查阅成本。最后，vscode扩展开发文档丰富、开发体系清晰。

废话少说，让我们进入正题吧。

认识vscode

vscode由electron（https://electronjs.org/?spm=a2c4e.11153940.blogcont638636.14.7986425aJcie82）开发，通过webview渲染，编辑器基于monacoeditor（https://github.com/Microsoft/monaco-editor?spm=a2c4e.11153940.blogcont638636.15.7986425aJcie82）。可以通过切换开发人员工具来验证。

vscode扩展设计理念

1、extensionhost

vscode扩展运行进程与vscode主进程互相独立，以避免有bug的扩展阻塞vscode主进程运行。

2、activationevents

为保证vscode性能。所有vscode扩展都是按需加载的。每个扩展应该声明加载时机，常用的声明方式如下：

{“contributes”:{“configuration”:{“type”:“object”,“title”:“TypeScriptconfiguration”,“properties”:{“typescript.tsdk”:{“type”:[“string”,“null”],“default”:null,“description”:“Specifiesthefolderpathcontainingthetsserverandlib.d.tsfilestouse.”}}}}}

2）、commands

在vscode中，cmd+p可以打命令面板，你可以在此执行所有的命令。vscode中所有行为都会被定义为命令，然后在菜单项行为、快捷键行为定义中引用该命令。

3）、keybindings

定义快捷键和它对应的command。

4）、snippets

定义并提供snippets（代码片段）

5）、jsonValidation

有没有记得，你在编辑tsconfig.json等配置文件的时候，vscode有充分的补全和属性提示？这个功能可以通过定义一份配置文件对应的jsonschema来提供。

官方文档

更多详细介绍请参看官方文档：https://code.visualstudio.com/docs/extensionAPI/extension-points

示例介绍

以vscode-pont（vscode-pont是一个智能接口代码生成器，下期笔者会详细介绍）为例。package.json文件的contributes中，定义了jsonValidation，使vscode-pont的配置文件pont-config.json编辑智能化。另外定义了一个快捷键，及其对应的命令。

vscode扩展开发实践

vscode扩展一般用Typescript开发，其完整、健全的类型系统，可以让你几乎不用看文档完成插件开发。扩展开发可以使用vscodeAPI和nodeAPI，你也可以用npm包的方式使用任意依赖。你也可以用WebAPI来写自定义组件。

1、YoCode-脚手架安装

安装命令如下：

npminstall-gyogenerator-codeyocode

2、填写扩展基本信息

yo会提示你填写扩展项目的基本信息，如项目名、项目id、描述、发布人，是否初始化git等。按部就班填写即可。

3、运行和调试

yo会初始化一个helloworld的扩展，点击运行查看效果。

插件运行后，会新开一个vscode窗口，你可以在此验证你的扩展效果，也可以在源码中一步步调试。

4、进阶

接下来，我们将基于hello-world，做一个显示你打开代码的注释率的扩展——让vscode状态栏显示当前代码的注释率。

1）、更新activationEvents

package.json中更新activationEvents属性。定义插件的加载时机。

如下所示，当在vscode打开tsx和ts代码时，则加载当前扩展。

“activationEvents”:[“onLanguage:typescript”,“onLanguage:typescriptreact”],

2）、定义UI层

vscode库类型和注释完美，大多数时候，我们通过vscode的智能提示，就能找到我们想要的API。我们先了解一下vscode下一些常用的命名空间：

然后在vscode这些命名空间中探索其API，得到如下UI层代码：

//如果目前存在打开的代码Tab页。if(vscode.window.activeTextEditor){//展示注释率showRate(vscode.window.activeTextEditor);}//如果当前切换了代码Tab页，则重新计算注释率vscode.window.onDidChangeActiveTextEditor(showRate);

状态栏展示代码注释率的代码如下：

//创建一个状态栏显示栏目。constrateBar=vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left,1);functionshowRate(editor:vscode.TextEditor){//获取当前Tab页代码constcode=editor.document.getText();//计算代码注释率constrate=analysisCode(code);//展示注释率rateBar.text=rate;rateBar.color=‘yellow’;rateBar.show();}

3）、分析代码注释率

这一步与vscode无关。计算方法就仁者见仁，智者见智了。为了防止各种edgecase，笔者分析代码的抽象语法树，统计其中属于注释的语法节点，来计算注释率。代码如下：

functionanalysisCode(code:string){constast=ts.createSourceFile(“”,code,ts.ScriptTarget.ES2015,true,ts.ScriptKind.TSX);letcommentLine=0;letcommentPoses=[];functionfindCommentPos(node:ts.Node){if(!commentPoses.find(num=>num===node.getFullStart())){commentPoses.push(node.getFullStart());}if(node){ts.forEachChild(node,findCommentPos);}}ts.forEachChild(ast,findCommentPos);commentPoses.forEach(pos=>{constcomments=ts.getLeadingCommentRanges(code,pos);comments&&comments.forEach(comment=>{constcommentCode=code.slice(comment.pos,comment.end);console.log(commentCode);commentLine+=commentCode.split(‘\n’).length;});})return’代码注释率:‘+(commentLine/code.split(’\n’).length*100+“).slice(0,4)+‘%’;}

4)发布

如果你是第一次进行vscode扩展发布，需要先申请发布账号。

发布账号申请文档：https://code.visualstudio.com/docs/extensions/publish-extension#_get-a-personal-access-token

发布账号申请成功后，用如下命令进行扩展发布：

npminstall-gvscevscepublish

本文中的这个示例，源码笔者已经上传到Github。源码地址：https://github.com/nefe/vscode-extension-tutorial

本文来自阿里云云栖社区，未经许可禁止转载。

?更多资讯，尽在云栖科技快讯

来科技快讯看新闻鸭

快点关注我认识我爱上我啊~~~