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

简介:   笔者从业以来,各路插件开发无算,而 vscode 把插件开发体验做到了极致。其开发体验,如沐春风,如丝般顺滑,经常写完了还想删掉再写一遍!   vscode 扩展的内置脚手架细心且精致,一键生成后即可运行。vscode 库类型完美,因此开发者可以仅通过 IDE 提示来猜到 API,省去了很多文档查阅成本。最后,vscode 扩展开发文档丰富、开发体系清
 
笔者从业以来,各路插件开发无算,而 vscode 把插件开发体验做到了极致。其开发体验,如沐春风,如丝般顺滑,经常写完了还想删掉再写一遍!
 
vscode 扩展的内置脚手架细心且精致,一键生成后即可运行。vscode 库类型完美,因此开发者可以仅通过 IDE 提示来猜到 API,省去了很多文档查阅成本。最后,vscode 扩展开发文档丰富、开发体系清晰。
 
废话少说,让我们进入正题吧。
 
认识 vscode
 
vscode 由 electron 开发,通过 webview 渲染,编辑器基于 monaco editor 。可以通过切换开发人员工具来验证,如下图:
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 文件时。
  • * 一直打开,不推荐。
更多细节可以参看文档: Visual Studio Code Activation Events - package.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 来提供。
 
官方文档
 
更多详细介绍请参看官方文档: https://code.visualstudio.com/docs/extensionAPI/extension-points
 
示例介绍
 
vscode-pont (vscode-pont 是一个智能接口代码生成器,下期笔者会详细介绍)为例。package.json 文件的 contributes 中,定义了 jsonValidation,使 vscode-pont 的配置文件 pont-config.json 编辑智能化。另外定义了一个快捷键,及其对应的命令。
 
vscode 扩展开发实践
 
vscode 扩展一般用 Typescript 开发,其完整、健全的类型系统,可以让你几乎不用看文档完成插件开发。扩展开发可以使用 vscode API 和 node API ,你也可以用 npm 包的方式使用任意依赖。你也可以用 Web API 来写自定义组件。
 
1、Yo Code - 脚手架安装
 
安装命令如下:
 
npm install -g yo generator-code yo code
 
如下图所示:
 
2、填写扩展基本信息
 
yo 会提示你填写扩展项目的基本信息,如项目名、项目id、描述、发布人,是否初始化git等。按部就班填写即可。如下图所示:
3、运行和调试
yo 会初始化一个 hello world 的扩展,点击运行查看效果。
插件运行后,会新开一个 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:
vscode 插件开发案例
 
这里介绍一些笔者团队开发的一些扩展。
 
toolkits
提供 iron-redux 的 snippets,和 iron-redux 的动态 action 创建功能。
 
kiwi
kiwi 是笔者团队开发的一站式国际化解决方案。其主要功能如下:
  • 中文抽取
 
  • 中文回显
使用 I18N 后,代码丧失了一部分可读性,因此扩展还提供了中文回显功能。
  • 中文查找
使用了 I18N 之后,代码中不再有中文,当业务中碰到问题需要定位对应代码位置非常困难。因此扩展提供了中文查找功能。
 
vscode-pont
下期介绍,敬请期待...
 
敲重点
新能源前端团队技术氛围好,团队大神多(妹纸也多),业务扩张,前途无量! 热烈欢迎联系笔者转岗~
 
 
相关文章
|
22天前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
44 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
24天前
|
网络安全 Docker 容器
VScode远程服务器之远程 远程容器 进行开发(五)
VScode远程服务器之远程 远程容器 进行开发(五)
21 1
|
24天前
|
IDE 开发工具
Vscode的远程开发之VScode优势(一)
Vscode的远程开发之VScode优势(一)
20 1
|
24天前
|
Kubernetes 网络安全 容器
VScode远程服务器进行开发(三)
VScode远程服务器进行开发(三)
22 0
|
24天前
|
Linux 网络安全 Windows
VScode远程开发之remote 远程开发(二)
VScode远程开发之remote 远程开发(二)
16 0
|
2月前
|
开发框架 .NET C#
VSCode开发.net项目时调试无效
【9月更文挑战第22天】在使用 VSCode 开发 .NET 项目时遇到调试问题,可从项目配置、调试配置、调试器安装、运行环境、日志和错误信息等方面排查。确认项目类型及文件配置,检查 `launch.json` 文件及配置项,确保调试器扩展已安装并启用,验证 .NET 运行时版本和环境变量,查看 VSCode 输出窗口和项目日志文件,检查权限及代码错误。若问题仍未解决,可查阅官方文档或社区论坛。
|
2月前
开发小技巧vscode
开发小技巧vscode
41 2
|
4月前
|
JSON 小程序 数据格式
uni-app 使用vscode开发uni-app
uni-app 使用vscode开发uni-app
211 0
|
4月前
|
JSON 数据格式
3. 使用 VsCode 开发 uni-app 项目需要使用到的插件
3. 使用 VsCode 开发 uni-app 项目需要使用到的插件
118 0
下一篇
无影云桌面