关于前端:从小白到大白-如何开发-VSCode-插件

欢送关注同名公众号《熊的猫》，文章会同步更新，也可疾速退出前端交换群！

因为之前的国际化的我的项目中总是要统计老我的项目中待翻译的内容，而后再交由业务进行翻译，如果总是人为统计不仅相当消耗精力和工夫，而且还不能保障是否有脱漏，因而想通过编写一个 i18n-helper 插件来实现这个性能。

然而，大家的需要总是出奇的类似（~~因为曾经有很多相似的插件存在了~~ ），因而没必要反复造轮子了，然而 如何开发 vscode 插件 的过程能够记录下来，分享给大家！

心愿本文对你有所帮忙！！！

好了，话不多说，咱们先按着 官网文档 跑一下它的插件用例吧！

npm install -g yo generator-code

终端运行 yo code，依照提醒生成目录即可。

因为官网文档短少一些细节，很容易导致小白调试插件失败，再常见的有如下状况。

进入对应我的项目目录后，依照官网文档的批示可通过如下两种形式进行调试：

按快捷键 F5
点击编辑器左下方的 Run Extension

接着按下 Ctrl + Shift + P，并输出 Hello World 命令，发现无奈找到对应的命令：

这个起因次要是因为 vscode 版本不统一造成的：

package.json 文件中指定的 vscode 版本号
以后理论的 vscode 版本号：

解决方案天然就是放弃版本的一致性
降级 vscode 版本
- 实用于以后版本号低于 package.json 文件中指定的版本号
- 【留神】 当初 vscode 版本的更新模型曾经调整为 “默认” 模式，所以当初不会收到 vscode 须要更新的信息，也无奈进行通过 “查看更新” 按钮来进行更新
  
  !
批改 package.json 文件中的 vscode 对应版本号
- 这种形式比较简单间接，就是批改为和以后正在应用的 vscode 版本保持一致即可，如下：

通过上述操作后，重新启动调试，按下 Ctrl + Shift + P，并输出 Hello World 命令，就能够找到对应的命令了，然而执行该命令时报错了：

起因就在于咱们没有编译文件，此时留神查看 package.json 文件中的 main 字段会发现：

很显著，咱们没有编译源文件生成指标文件，此时咱们只须要通过 npm run watch 启用监听模式，让其进行编译即可：

此时在执行命令，就会发现胜利了：

激活事件（针对 V1.74.0 之前的 VSCode 版本）
- 即插件激活的机会，目标是反对用户在输出 Hello World 命令后可能激活插件
- 例如，应用 onCommand 进行注册 onCommand:extension.helloWorld
公布内容配置
- VS Code 通过 package.json 进行扩大，通过配置 插件清单字段 便于开发插件
- 例如，应用 contributes.commands 绑定一个 命令 ID extension.helloWorld，目标是让 Hello World 命令就能够在命令面板中匹配到等
VS Code API
- 插件代码中须要调用的一系列 JavaScript API 应用 VS Code 的一些性能个性
- 例如，通过 vscode.commands.registerCommand 将一个函数绑定到对应的 命令 ID extension.helloWorld 上，激活命令时执行的就是该函数等

目录构造比较简单就不过多介绍了。

当然相干的 svg 插件曾经有不少了，这里只是用这个简略的需要来举个例子，不便让大家更容易了解。

面向用户的命令

首先，咱们要注册命令，让用户可能应用咱们的插件，这里咱们就简略反对如下两种形式：

Ctrl + Shift + P 匹配命令

只须要在 package.json 中的 contributes.commands 进行如下配置即可，详情可见 contributes.commands

"contributes": {
    "commands": [
          {
            "command": "svg-viewer.previewsvg",
            "title": "Preview SVG"
          }
     ]
}

鼠标右键菜单抉择命令
- 这种形式绝对于下面的形式来讲更简便，只须要在 package.json 中的 contributes.menus 进行如下配置即可，详情可见 contributes.menus
```
"contributes": {
    "menus": {
      "editor/context": [
        {"command": "svg-viewer.previewsvg"}
      ]
}
```
上述 鼠标右键菜单抉择命令 的配置有一点不好，那就是装置此插件后，在任何文件中右键都会显示 Preview SVG 选项，此时 调试成果如下：

因为咱们的本意是预览 SVG 文件，而不是其余文件，因而对于不合乎的文件就没有必要展现此选项了，此时能够通过 when 子句上下文 来管制显示暗藏命令选项，此时配置更改为：

"contributes": {
    "menus": {
      "editor/context": [
        {
          "command": "svg-viewer.previewsvg",
          "when": "resourceExtname =='.svg'"
        }
      ]
}

调试成果如下：

注册命令

上述咱们配置好了命令，当初就须要注册命令了，也就是决定当命令激活时须要做些什么事件，即只须要在 extension.ts 文件的 activate 办法中做如下批改即可：

// 执行命令时被激活
export function activate(context: vscode.ExtensionContext) {// 应用控制台输入诊断信息 (console.log) 和谬误(console.error)
  // 这行代码只会在你的扩大被激活时执行一次
  console.log('Congratulations, your extension"svg-viewer"is now active!');

  // 注册命令，commandId 参数必须与 package.json 中的 command 字段匹配
  let disposable = vscode.commands.registerCommand(
    "svg-viewer.previewsvg",
    () => {// 具体要做的内容}
  );

  context.subscriptions.push(disposable);
}

应用 Webview

平时咱们通过浏览器应用 <img> 标签能够查看 svg 文件的成果，例如：

那么在 VSCode 中可不可以也以这样的形式来实现呢？

那当然是能够的。

咱们能够应用如下代码编辑器中创立一个 Webview，而后其中的 html 选项内容就能够用咱们常见的 html 构造 来填充，并作为最终后果来进行渲染，例如：

  // 创立并显示新的 webview
  const panel = vscode.window.createWebviewPanel(
    "SVGPreview", // 只供外部应用，即 webview 的标识
    "SVG Preview", // 面板题目
    vscode.ViewColumn.One, // 给新的 webview 面板一个编辑器视图
    {} // Webview 选项);

  // 设置 HTML 内容
  panel.webview.html = `<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SVG Preview</title>
      </head>
      <body>
        <img src="${指标文件地址}" />
      </body>
    </html>
    `;

获取指标文件的 base64 格局

因为咱们关上相应 svg 文件后右键进行预览，那么第一步就得先获取以后这个文件的门路，这就又得须要应用的 VSCode API 了，如下

 const editor = vscode.window.activeTextEditor;
 let url = editor.document.fileName; // 获取到的就是对应文件的绝对路径

然而如果你间接把这个门路作为 <img> 标签的 src 属性是没法没失常渲染的，大抵如下：

既然如此，那么咱们能够把这个 svg 文件读取到，而后把它转成 base64 的格局，再交由 <img> 标签应用即可，此时咱们就须要应用到 node 内置的 fs 模块了，即：

  const fs = require("fs");
  const content = fs.readFileSync(url);
  return `data:image/svg+xml;base64,${content.toString("base64")}`;

须要查看源码的可点此获取：源代码

通过上述的解决咱们就能够在 VSCode 中预览 svg 文件了，成果如下：

上述计划尽管能够实现咱们须要的性能，然而对于 svg 文件来讲还是简单了，因为在浏览其中是能够间接渲染 <svg> 标签的，而 svg 文件的内容不就是 <svg> 标签吗，那么咱们只须要把文件内容读取进去，间接填充到 webview.html 中就好了，基本不须要转成 base64 格局。

这个计划比较简单，这里间接贴出 extension.ts 文件中的代码了：

import * as vscode from "vscode";

// 执行命令时被激活
export function activate(context: vscode.ExtensionContext) {const fs = require("fs");

  // 注册命令，commandId 参数必须与 package.json 中的 command 字段匹配
  let disposable = vscode.commands.registerCommand(
    "svg-viewer.previewsvg",
    () => {const url = getActiveTextUrl();
      const content = fs.readFileSync(url, "utf-8");
      opedWebview(content);
    }
  );

  context.subscriptions.push(disposable);
}

// 获取以后文件门路
export function getActiveTextUrl(): string {
  let url = "";
  const editor = vscode.window.activeTextEditor;

  if (editor) {url = editor.document.fileName;}

  return url;
}

// 创立并显示新的 webview
export function opedWebview(content: string) {
  const panel = vscode.window.createWebviewPanel(
    "SVGPreview", // 只供外部应用，即 webview 的标识
    "SVG Preview", // 面板题目
    vscode.ViewColumn.One, // 给新的 webview 面板一个编辑器视图
    {} // Webview 选项);

  // 设置 HTML 内容
  panel.webview.html = getWebviewContent(content);
}

// 渲染模版
export function getWebviewContent(content: string) {
  return `<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SVG Preview</title>
        <style>
          html,
          body {
            width: 100%;
            height: 100%;
          }
          body {
            display: flex;
            justify-content: center;
            align-items: center;
          }
          svg {max-height: 90%;}
        </style>
      </head>
      <body>
        ${content}
      </body>
    </html>
    `;
}

// 停用命令时执行
export function deactivate() {}

通过 这个地址 注册开发者账号，而后按提醒公布到官网利用市场即可。

这种形式能够实现即便 没有公布到利用市场，也能够间接通过对应文件的形式进行插件的装置和应用。

装置命令 npm i vsce -g

间接应用 vsce package 命令进行打包，实现后就会生成一个 .vsix 文件，这个也就是在后续装置插件时要应用的文件。

【留神 】 在应用这个命令打包时，可能会呈现 vsce 所须要反对的 VSCode 最低版本和以后应用版本之间存在出入， 导致打包失败：

特地是如果依照前文的形式间接批改 package.json 文件中的版本号时，此时最好还是将 VSCode 版本进行降级，而不是手动批改版本号。

依照如下形式操作并抉择对应的 .vsix 文件即可.

欢送关注同名公众号《熊的猫》，文章会同步更新，也可疾速退出前端交换群！

以上就是本文的全部内容了，文中没有过多介绍那些没有用到的内容（如 package.json 相干配置），因为内容太多了，所以大家多查阅下官网文档即可。

通过本篇文章，心愿能让你从一个 VSCode 插件开发 的小白变成大白，可能为团队赋能，或者作为本人的一个技能亮点。

心愿本文对你有所帮忙！！！

关于前端:从小白到大白-如何开发-VSCode-插件

前言

跑通官网插件示例

生成插件目录

装置脚手架

初始化插件目录

调试插件

找不到 Hello World 命令

这个起因次要是因为 vscode 版本不统一造成的：

解决方案天然就是放弃版本的一致性

Hello World 命令报错

【实战】编写 VSCode 插件

插件的三个概念

在 VSCode 中预览 SVG 文件 — `<img />` 标签预览

SVG 文件在 VSCode 中的原始展现成果

公布内容配置 — package.json 文件

面向用户的命令

应用 VSCode API

注册命令

应用 Webview

获取指标文件的 base64 格局

源代码 & 成果展现

在 VSCode 中预览 SVG 文件 — `<svg>` 标签预览

公布

公布到官网利用市场

应用 vsce 打成 vsix 插件

装置 vsce 工具

打包生成 .vsix 文件

装置 vsix 插件

最初

前言

跑通官网插件示例

生成插件目录

装置脚手架

初始化插件目录

调试插件

找不到 Hello World 命令

这个起因次要是因为 vscode 版本不统一造成的：

解决方案天然就是放弃版本的一致性

Hello World 命令报错

【实战】编写 VSCode 插件

插件的三个概念

在 VSCode 中预览 SVG 文件 — <img /> 标签预览

SVG 文件在 VSCode 中的原始展现成果

公布内容配置 — package.json 文件

面向用户的命令

应用 VSCode API

注册命令

应用 Webview

获取指标文件的 base64 格局

源代码 & 成果展现

在 VSCode 中预览 SVG 文件 — <svg> 标签预览

公布

公布到官网利用市场

应用 vsce 打成 vsix 插件

装置 vsce 工具

打包生成 .vsix 文件

装置 vsix 插件

最初

在 VSCode 中预览 SVG 文件 — `<img />` 标签预览

在 VSCode 中预览 SVG 文件 — `<svg>` 标签预览