![](https://i-blog.csdnimg.cn/blog_migrate/a570ee073668218d20327c95949760a2.jpeg)
笔者从业以来,各路插件开发无算,而 vscode 把插件开发体验做到了极致。其开发体验,如沐春风,如丝般顺滑,经常写完了还想删掉再写一遍!
vscode 扩展的内置脚手架细心且精致,一键生成后即可运行。vscode 库类型完美,因此开发者可以仅通过 IDE 提示来猜到 API,省去了很多文档查阅成本。最后,vscode 扩展开发文档丰富、开发体系清晰。
废话少说,让我们进入正题吧。
认识 vscode
vscode 由
electron
开发,通过 webview 渲染,编辑器基于
monaco editor
。可以通过切换开发人员工具来验证,如下图:
![v2-34f023ab398d31c000268ac119cdae28_b.jp](https://i-blog.csdnimg.cn/blog_migrate/b150e237aeceac13e72ac2dff7d17402.png)
vscode 扩展设计理念
1、extension host
vscode 扩展运行进程与 vscode 主进程互相独立,以避免有 bug 的扩展阻塞 vscode 主进程运行。
2、activation events
为保证 vscode 性能。所有 vscode 扩展都是按需加载的。每个扩展应该声明加载时机,常用的声明方式如下:
-
onLanguage:python 当用户打开 python 代码文件时。`
-
onCommand:sayHello 当用户执行 sayHello 命令时。 command 的概念稍后介绍。
-
workspaceContains:pont-config.json 当项目中包含 pont-config.json 文件时。
-
* 一直打开,不推荐。
3、vscode UI 组件
vscode UI 组件非常简洁,也几乎没有可扩展性。这个设计,意在引导扩展开发者保持扩展 UI 的简洁和视觉风格统一。
当然,如果你执意要自定义组件,则可以调用 createWebviewPanel API,自定义 html、css、js 组成一个 iframe,来完全自定义一个 UI 组件。
manifest
任何插件系统都需要一个 manifest 文件,来声明插件相关的元信息,vscode 也不例外。
vscode 的 manifest 文件内置在 package.json 中。下面介绍 package.json 中属于 vscode manifest 部分的字段。
1、Contribution Points
一个 vscode 扩展除了可以增强 vscode 的功能,还可以提供自定义 snippets、theme、快捷键、配置集,而这些都可以通过
contributes
字段来支持。
contributes
字段用得比较多的有
configuration
、
commands
、
keybindings
、
snippets
、
jsonValidation
等。下面一一介绍:
1)、configuration
自定义你扩展的配置项。你可以在扩展中通过如下命令获取用户的配置值:
vscode.workspace.getConfiguration('myExtension');
示例:
{
"contributes": {
"configuration": {
"type": "object",
"title": "TypeScript configuration",
"properties": {
"typescript.tsdk": {
"type": ["string", "null"],
"default": null,
"description": "Specifies the folder path containing the tsserver and lib*.d.ts files to use."
}
}
}
}
}
2)、commands
在 vscode 中,cmd + p 可以打命令面板,你可以在此执行所有的命令。vscode 中所有行为都会被定义为命令,然后在菜单项行为、快捷键行为定义中引用该命令。
3)、keybindings
定义快捷键和它对应的 command。
4)、snippets
定义并提供 snippets(代码片段)
5)、jsonValidation
有没有记得,你在编辑 tsconfig.json 等配置文件的时候,vscode 有充分的补全和属性提示?这个功能可以通过定义一份配置文件对应的 json schema 来提供。
官方文档
示例介绍
以
vscode-pont
(vscode-pont 是一个智能接口代码生成器,下期笔者会详细介绍)为例。package.json 文件的 contributes 中,定义了 jsonValidation,使 vscode-pont 的配置文件 pont-config.json 编辑智能化。另外定义了一个快捷键,及其对应的命令。
![v2-211d1e8b99b3e3ff522c48ab2d167263_b.jp](https://i-blog.csdnimg.cn/blog_migrate/a9313e71e55ea793387b879bea9383b6.png)
vscode 扩展开发实践
vscode 扩展一般用 Typescript 开发,其完整、健全的类型系统,可以让你几乎不用看文档完成插件开发。扩展开发可以使用 vscode API 和 node API ,你也可以用 npm 包的方式使用任意依赖。你也可以用 Web API 来写自定义组件。
1、Yo Code - 脚手架安装
安装命令如下:
npm install -g yo generator-code yo code
如下图所示:
![v2-0b02494ca4b9a1a69c61d8106905876a_b.jp](https://i-blog.csdnimg.cn/blog_migrate/94d6e7d8dd071ec93e6758728ae82515.png)
2、填写扩展基本信息
yo 会提示你填写扩展项目的基本信息,如项目名、项目id、描述、发布人,是否初始化git等。按部就班填写即可。如下图所示:
![v2-a9dee9c2e071c7878f88717f82dd0d13_b.jp](https://i-blog.csdnimg.cn/blog_migrate/ebc1c4b9d519a4d4a84e234a9f67ade9.png)
3、运行和调试
yo 会初始化一个 hello world 的扩展,点击运行查看效果。
![v2-64a54c98fab2072af3096dec7d2ddcc8_b.jp](https://i-blog.csdnimg.cn/blog_migrate/7307d56afdb03ee33e5b7f363b5da8cf.png)
插件运行后,会新开一个 vscode 窗口,你可以在此验证你的扩展效果,也可以在源码中一步步调试。
4、进阶
接下来,我们将基于 hello-world,做一个显示你打开代码的注释率的扩展 —— 让 vscode 状态栏显示当前代码的注释率。
1)、更新 activationEvents
package.json 中更新 activationEvents 属性。定义插件的加载时机。
如下所示,当在 vscode 打开 tsx 和 ts 代码时,则加载当前扩展。
"activationEvents": [ "onLanguage:typescript", "onLanguage:typescriptreact" ],
2)、定义 UI 层
vscode 库类型和注释完美,大多数时候,我们通过 vscode 的智能提示,就能找到我们想要的 API。 我们先了解一下 vscode 下一些常用的命名空间:
-
workspace 当前工作区相关,文件树相关 API。
-
window 当前视窗相关,编辑器相关 API。
-
commands 注册 command 。
然后在 vscode 这些命名空间中探索其 API,得到如下 UI 层代码:
// 如果目前存在打开的代码 Tab 页。
if (vscode.window.activeTextEditor) {
// 展示注释率
showRate(vscode.window.activeTextEditor);
}
// 如果当前切换了代码 Tab 页,则重新计算注释率
vscode.window.onDidChangeActiveTextEditor(showRate);
状态栏展示代码注释率的代码如下:
// 创建一个状态栏显示栏目。
const rateBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 1);
function showRate(editor: vscode.TextEditor) {
// 获取当前Tab页代码
const code = editor.document.getText();
// 计算代码注释率
const rate = analysisCode(code);
// 展示注释率
rateBar.text = rate;
rateBar.color = 'yellow';
rateBar.show();
}
3)、分析代码注释率
这一步与vscode无关。计算方法就仁者见仁,智者见智了。为了防止各种 edge case,笔者分析代码的抽象语法树,统计其中属于注释的语法节点,来计算注释率。代码如下:
function analysisCode(code: string) {
const ast = ts.createSourceFile(
"",
code,
ts.ScriptTarget.ES2015,
true,
ts.ScriptKind.TSX
);
let commentLine = 0;
let commentPoses = [];
function findCommentPos(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 => {
const comments = ts.getLeadingCommentRanges(code, pos);
comments && comments.forEach(comment => {
const commentCode = 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 扩展发布,需要先申请发布账号。
发布账号申请成功后,用如下命令进行扩展发布:
npm install -g vsce vsce publish
本文中的这个示例,源码笔者已经上传到 Github。源码地址:
https://github.com/nefe/vscode-extension-tutorial
,并且已发布到 vscode 扩展市场。笔者可在扩展市场中搜索 hello-world:
![v2-1e1c4f3abb84894f07a524da739f492e_b.jp](https://i-blog.csdnimg.cn/blog_migrate/4175564869d85ed880cd57f744f75964.png)
vscode 插件开发案例
这里介绍一些笔者团队开发的一些扩展。
toolkits
提供 iron-redux 的 snippets,和 iron-redux 的动态 action 创建功能。
kiwi
kiwi 是笔者团队开发的一站式国际化解决方案。其主要功能如下:
-
中文抽取
![v2-934ebb9410793a24d1e9768ae176a8ff_b.gi](https://i-blog.csdnimg.cn/blog_migrate/3e4a12faa536721b6f1b7d872fb94780.gif)
-
中文回显
使用 I18N 后,代码丧失了一部分可读性,因此扩展还提供了中文回显功能。
![v2-bd90302527d40dfc5b5ce7a512a227b4_b.jp](https://i-blog.csdnimg.cn/blog_migrate/43d8ef3aaf229ae2eaa0278b8bd64058.png)
-
中文查找
使用了 I18N 之后,代码中不再有中文,当业务中碰到问题需要定位对应代码位置非常困难。因此扩展提供了中文查找功能。
![v2-24b412875dd52ee4d87d772e3baf505b_b.jp](https://i-blog.csdnimg.cn/blog_migrate/4558523e85cb2637975d55a4e6086404.png)
vscode-pont
下期介绍,敬请期待...
敲重点
新能源前端团队技术氛围好,团队大神多(妹纸也多),业务扩张,前途无量! 热烈欢迎联系笔者转岗~