写了个适用于vscode的minio图床客户端插件 – vscode-minio-picman

缘起

自己搭建minio做我的个人博客图床好一段时间了, 一直用minio自带的web管理后台来上传图片, 它的界面长下面这个样子

minio-console

上传完后, 需要点下文件列表里刚刚传上去的文件的分享按钮

image

然后会出来下面这个界面

image

恩, 没错, 如果你直接复制这个链接到浏览器地址栏然后打开, 当你满心欢喜的以为能看到你刚才上传的好看的 风景/小姐姐 图片了, 结果现实只有一个白底黑子的浏览器错误报告…

browser error

内心多半是一万句”xxx”

其实要看到真正的图片倒也不难, 把//10.244.1.134/blog/images/1.gif里面的//10.244.1.134改成你自己配置的minio域名就行了, 比如 //minio.example.com

但是这也太麻烦了, 还让不让愉快的写markdown了啊. 于是就萌生了一个写一个vscode插件来传图片到minio的想法, 因为我主要都是用vscode来编辑markdown的.

vscode-minio-picman

vscode-minio-picman顾名思义, 适用于vscode的minio图床插件, 因为版本的顾名思义就是

A vscode plugin used to upload images to your minio server

这个插件可以让你将剪贴板或本地磁盘中图片通过上传到minio, 完后可以直接给你正确图片的链接

放一张演示gif

上传完成后, 如果你当前正在编辑的是markdown文件, 那么插件会自动帮你生成markdown格式的图片并插入到编辑器中, 像上面演示的那样

如果当前没有正在编辑的文件或者编辑的不是markdown文件的话, 则会弹出一个窗口提示你上传成功啦, 这个弹窗上有一些按钮, 允许你复制此图片不同格式的链接, 如下图

image

终于不用像之前那样蠢呼呼的在minio自带控制台里点分享按钮在替换域名那样麻烦了. 又可以愉快的markdown了! 👏

vscode-minio 使用前

使用前需要你有一个minio文件服务器, 然后在vscode设置页面中填好相关的设置

image

⚠️需要确保配置的bucket name在minio中已经创建好了的, 否则无法上传成功

vscode-minio 快捷键

插件默认:

  • ctrl/cmd+shift+x上传剪贴板图片
  • ctrl/cmd+shift+z从本地选择一张图片上传

也可以自己到vscode相关的设置页面自定义这两个命名的快捷键(键盘按下cmd+shift+p然后搜索Keyboard shortcuts)

image

vscode-minio 仓库地址

vscode-minio-picman, 欢迎围观吐槽或pr

为什么不用picgo

看了下picgo是好像需要通过插件支持minio, picgo的vscode的插件好像暂时还不支持picgo插件系统.

不过很感谢vscode-picgo, 获取剪贴板图片的代码抄的就是这个项目的, 让我省了很多时间和精力 🙏