picgo的vscode插件支持easyimage图床

前言

picgo 官方提供的 vscode 插件,默认不支持自定义图床 easyimage,这里进行适配以便支持

代码构建

下载仓库代码 https://github.com/PicGo/vs-picgo.git,在 vscode 市场中发布的最新版本为 2.1.6,将本地代码分支切换到 2.1.6

执行 yarn install 以及 yarn run build,在构建的时候提示错误如下

这是因为自 node 17 开始,node 升级使用了 OpenSSL 3.0,对允许的算法和密钥大小的限制更加严格

可以通过参数 openssl-legacy-provider 临时规避,powershell 设置环境变量 $env:NODE_OPTIONS="--openssl-legacy-provider"

shell 复制代码
PS D:\develop\vs-picgo> $env:NODE_OPTIONS="--openssl-legacy-provider"
PS D:\develop\vs-picgo> yarn run build
yarn run v1.22.22
$ yarn vsce package --yarn
$ D:\develop\vs-picgo\node_modules\.bin\vsce package --yarn
Executing prepublish script 'yarn run vscode:prepublish'...
$ yarn && webpack --mode production
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
success Already up-to-date.
[webpack-cli] Compilation finished
assets by path clipboard/*.ps1 1.9 KiB
  asset clipboard/windows10.ps1 1.23 KiB [emitted] [from: node_modules/picgo/dist/src/utils/clipboard/windows10.ps1] [copied]  
  asset clipboard/windows.ps1 682 bytes [emitted] [from: node_modules/picgo/dist/src/utils/clipboard/windows.ps1] [copied]     
assets by path clipboard/*.sh 1.29 KiB
  asset clipboard/wsl.sh 667 bytes [emitted] [from: node_modules/picgo/dist/src/utils/clipboard/wsl.sh] [copied]
  asset clipboard/linux.sh 659 bytes [emitted] [from: node_modules/picgo/dist/src/utils/clipboard/linux.sh] [copied]
asset extension.js 5.92 MiB [emitted] (name: main) 1 related asset
asset clipboard/mac.applescript 1.93 KiB [emitted] [from: node_modules/picgo/dist/src/utils/clipboard/mac.applescript] [copied]
orphan modules 213 KiB [orphan] 132 modules
runtime modules 791 bytes 4 modules

......

webpack 5.11.0 compiled with 5 warnings in 4103 ms
 DONE  Packaged: D:\develop\vs-picgo\vs-picgo-2.1.6.vsix (15 files, 2.69MB)
 INFO  
The latest version of vsce is 2.15.0 and you have 1.83.0.
Update it now: npm install -g vsce
Done in 8.43s.
PS D:\develop\vs-picgo>

代码逻辑

代码逻辑和之前的基本一致,也是注册一个 uploader 实现,可以参考这里 PicGo 配置

项目的代码已经实现了 registerRenamePlugin 的功能,参照该函数逻辑复制然后改一下

src\vs-picgo\index.ts 文件中 VSPicgo 的构造增加一个 this.registerUploader() 函数调用

ts 复制代码
  constructor() {
    super()
    this.configPicgo()
    // register uploader
    this.registerUploader()
    // Before upload, we change names of the images.
    this.registerRenamePlugin()
    // After upload, we use the custom output format.
    this.addGenerateOutputListener()
  }

registerRenamePlugin 函数的后面增加一个 registerUploader 函数实现

通过 VSPicgo.picgo.helper.uploader.register 注册 easyimage 的 uloader,函数 registerUploader 的完整实现如下

这个逻辑和之前写的 PicGo 配置 基本是一致的

ts 复制代码
  registerUploader() {
    const easyimageUploader: IPlugin = {
      handle: async (ctx: IPicGo) => {
        let userConfig = ctx.getConfig("picBed.easyimage");
        if (!userConfig) {
            throw new Error("Can't find uploader config");
        }

        const imgList = ctx.output;
        for (let i in imgList) {
            const img = imgList[i];
            const { base64Image, fileName } = img;
            let { buffer } = img;
            if (!buffer && base64Image) {
                buffer = Buffer.from(img.base64Image, "base64");
            }

            // 随机生成边界
            const boundary = '----WebKitFormBoundary' + Math.random().toString(36).substr(2, 10);

            // 构造 multipart/form-data 内容
            let reqBodyParts = [];

            reqBodyParts.push(Buffer.from(`--${boundary}\r\n`));
            reqBodyParts.push(Buffer.from(`Content-Disposition: form-data; name="token"\r\n\r\n`));
            //reqBodyParts.push(Buffer.from(`${userConfig.token}\r\n`));
            reqBodyParts.push(Buffer.from(`${(userConfig as any).token}\r\n`));

            reqBodyParts.push(Buffer.from(`--${boundary}\r\n`));
            reqBodyParts.push(Buffer.from(`Content-Disposition: form-data; name="image"; filename="${fileName}"\r\n`));
            reqBodyParts.push(Buffer.from(`Content-Type: image/png\r\n\r\n`));
            reqBodyParts.push(buffer);
             reqBodyParts.push(Buffer.from(`\r\n`));

            // 计算 Content-Length
            reqBodyParts.push(Buffer.from(`--${boundary}--\r\n`));
            const reqBody = Buffer.concat(reqBodyParts);

            const requestConfig = {
                url: (userConfig as any).server,
                method: "POST",
                headers: { 
                    "Content-Type": `multipart/form-data; boundary=${boundary}`,
                    "User-Agent": "PicGo-easyimage",
                    "Content-Length": reqBody.length,
                },
                body: reqBody,
            };
 
            let body = await ctx.Request.request(requestConfig); // 等待请求完成
            body = JSON.parse(body);
            const { url: imgUrl, message } = body;
            if (imgUrl) {
                img.imgUrl = imgUrl;
            } else {
                ctx.emit("notification", {
                    title: "上传失败",
                    body: message,
                });
            }
        }
      }
    }

    VSPicgo.picgo.helper.uploader.register(
      'easyimage',
      easyimageUploader
    )
  }

此外,项目还有一些 lint 规则会导致编译错误,本地版本可以先取消检查,除 src\vs-picgo\index.ts 文件的变动外

其他的变动如下

diff 复制代码
diff --git a/package.json b/package.json
index 86d1c93..914e195 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,8 @@
             "qiniu",
             "tcyun",
             "upyun",
-            "weibo"
+            "weibo",
+            "easyimage"
           ],
           "default": "",
           "markdownDescription": "%config.picBed.uploader%"
@@ -104,7 +105,8 @@
             "qiniu",
             "tcyun",
             "upyun",
-            "weibo"
+            "weibo",
+            "easyimage"
           ],
           "default": "smms",
           "markdownDescription": "%config.picBed.current%"
@@ -301,13 +303,6 @@
     "release": "bump-version",
     "build": "yarn vsce package --yarn"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "post-merge": "sh .scripts/update_dependencies.sh"
-    }
-  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,mjs,mjsx,cjs,cjsx}": [
       "eslint --fix --color",
diff --git a/src/utils/lodash-mixins.ts b/src/utils/lodash-mixins.ts
index e4aadf8..a68ca85 100644
--- a/src/utils/lodash-mixins.ts
+++ b/src/utils/lodash-mixins.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash'
-// @ts-expect-error
+
 import * as _db from 'lodash-id'
 
 interface ILoDashMixins extends _.LoDashStatic {
diff --git a/tsconfig.json b/tsconfig.json
index 77950cb..5ea35c2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,7 @@
     "esModuleInterop": true,
     "rootDir": ".",
     /* Strict Type-Checking Option */
-    "strict": true,
+    "strict": false,
     /* enable all strict type-checking options */
     /* Additional Checks */
     "noUnusedLocals": true /* Report errors on unused locals. */,

代码修改后,再次运行 yarn run build进行编译打包,没问题的话会在当前目录生成一个 vsix 文件

在 vscode 中选中该文件,右键 安装扩展VSIX,这样就安装好了

部署配置

在 vscode 中安装好 vs-picgo 插件后,在 vscode 的设置中增加两个配置如下(如果是 json 文件的最后一行不需要逗号)

这里的 data.json 文件是在 PicGo 的客户端配置,需要在客户端中先配置好,不同环境的路径可能会不同,如果没有配置需要先配置下

json 复制代码
    "picgo.configPath": "C:\\Users\\Administrator\\AppData\\Roaming\\picgo\\data.json",
    "picgo.picBed.current": "easyimage"

配置之后,就可以在 vscode 中通过 ctrl + alt + u 快捷键对粘贴板中的图片进行上传了

相关推荐
Growthofnotes1 小时前
VSCode中Node.js 使用教程
ide·vscode·node.js
王佳斌1 小时前
node.js文件系统(fs) - 创建文件、打开文件、写入数据、追加数据、读取数据、创建目录、删除目录
node.js
bloglin999993 小时前
npm和nvm和nrm有什么区别
前端·npm·node.js
哎哟喂_!4 小时前
Node.js 同步加载问题详解:原理、危害与优化策略
前端·chrome·node.js
一小池勺4 小时前
Node.js事件循环中的FIFO原则
node.js
Q_Q19632884755 小时前
python的家教课程管理系统
开发语言·spring boot·python·django·flask·node.js·php
chilavert3188 小时前
说一说Node.js高性能开发中的I/O操作
node.js
蜡笔小柯南15 小时前
解决:npm install报错,reason: certificate has expired
前端·npm·node.js
程序员拂雨1 天前
Next.js 知识框架总结
node.js
哎哟喂_!1 天前
Node.js 循环依赖问题详解:原理、案例与解决方案
前端·chrome·node.js