前言
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 快捷键对粘贴板中的图片进行上传了