提升开发效率：为 VS Code 打造必备图片管理插件

开发工具

2023-09-07 20:43:10

作为一名开发者，您可能会经常遇到需要在代码中处理和管理图片的情况。手动上传图片并复制粘贴链接不仅耗时，而且容易出错。为了解决这个问题，我们可以开发一款 VS Code 插件，通过自动化这些任务来简化图片管理流程。

插件功能

我们的插件将提供以下功能：

右键上传图片： 只需右键单击图片，即可将其上传到七牛云。
自动粘贴链接： 上传完成后，插件会自动将图片链接粘贴到当前光标位置。
图片预览： 鼠标悬停在链接上方时，即可预览图片。

开发步骤

1. 创建 VS Code 插件项目

按照官方文档中的步骤创建新的 VS Code 插件项目。

2. 实现右键菜单命令

在 package.json 文件中，添加以下代码：

"contributes": {
  "commands": [
    {
      "command": "extension.uploadImage",
      "title": "Upload Image"
    }
  ]
}

然后，在 src/extension.ts 文件中，实现命令处理程序：

import * as vscode from "vscode";
import * as path from "path";
import * as fs from "fs";
import * as qiniu from "qiniu";

const accessKey = "<YOUR_ACCESS_KEY>";
const secretKey = "<YOUR_SECRET_KEY>";
const bucketName = "<YOUR_BUCKET_NAME>";

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand("extension.uploadImage", async () => {
    const editor = vscode.window.activeTextEditor;
    if (!editor) {
      vscode.window.showErrorMessage("No active editor found.");
      return;
    }

    const document = editor.document;
    const selection = editor.selection;
    const filePath = document.fileName;

    const fileName = path.basename(filePath);
    const fileBuffer = fs.readFileSync(filePath);

    const mac = new qiniu.Mac(accessKey, secretKey);
    const config = new qiniu.Config();
    config.zone = qiniu.Zone.zone2;
    const client = new qiniu.rs.Client(config);

    const putPolicy = new qiniu.rs.PutPolicy({
      scope: bucketName,
    });

    const uploadToken = putPolicy.uploadToken(mac);

    try {
      const uploadResponse = await client.uploadFile(uploadToken, fileName, fileBuffer);

      if (uploadResponse.key) {
        const imageUrl = `https://${bucketName}.qiniudn.com/${uploadResponse.key}`;
        const edit = new vscode.WorkspaceEdit();
        edit.insert(document.uri, selection.end, imageUrl);
        vscode.workspace.applyEdit(edit);
        vscode.window.showInformationMessage(`Image uploaded successfully to ${imageUrl}`);
      }
    } catch (error) {
      console.error(error);
      vscode.window.showErrorMessage(`Failed to upload image: ${error}`);
    }
  });

  context.subscriptions.push(disposable);
}

3. 实现图片预览

为了实现图片预览，需要修改 package.json 文件：

"contributes": {
  ...
  "markdown.previewProviders": [
    {
      "id": "imagePreview",
      "displayName": "Image Preview",
      "markdownAction": {
        "command": "extension.previewImage"
      }
    }
  ]
}

然后，在 src/extension.ts 文件中，实现预览命令处理程序：

import * as vscode from "vscode";
import * as path from "path";

export function activate(context: vscode.ExtensionContext) {
  ...
  context.subscriptions.push(
    vscode.commands.registerCommand("extension.previewImage", async () => {
      const editor = vscode.window.activeTextEditor;
      if (!editor) {
        vscode.window.showErrorMessage("No active editor found.");
        return;
      }

      const document = editor.document;
      const selection = editor.selection;
      const text = document.getText(selection);

      const imageUrl = text.match(/https:\/\/[a-z0-9]+.qiniudn.com\/[a-z0-9]+\.[a-z]+/);
      if (imageUrl) {
        const panel = vscode.window.createWebviewPanel(
          "imagePreview",
          "Image Preview",
          vscode.ViewColumn.Two,
          { enableScripts: false }
        );
        panel.webview.html = `<img src="${imageUrl[0]}" />`;
      } else {
        vscode.window.showErrorMessage("No image URL found.");
      }
    })
  );
  ...
}