PicGo Paste - VSCode Extension
修改自 https://github.com/zcyisiee/vscode-picgo-paste
只在安装了picgo-desktop 2.5.1 的cachy OS + niri (wayland)桌面上测试。
效果可以达到windwos上在typora里直接粘贴图片,文字的效果
复制图图片、文字,直接粘贴,会变成对象存储的markdown链接
package.json 就不改了,如果你也是linux下使用,可以尝试一下。
在 Markdown 文件中粘贴图片或文件时,自动调用 PicGo 上传到图床,并插入正确的 Markdown 引用。
VS Code Marketplace
功能特性
- 直接
Cmd+V / Ctrl+V 粘贴图片或文件,自动上传并插入 Markdown 链接
- 支持
Cmd+Alt+V / Ctrl+Alt+V 手动触发上传
- 支持图片与普通文件,非图片会插入普通 Markdown 链接
- 支持 PicGo Desktop 内置 Server,也支持 PicGo CLI
- 支持 Linux 文件管理器复制文件后再粘贴到 Markdown
- 支持 Wayland 剪贴板读取,优先使用
wl-paste
工作流程
截图 / 复制图片 / 文件管理器复制文件
-> 在 Markdown 中按 Cmd+V / Ctrl+V
-> 扩展调用 PicGo 上传
-> 插入  或 [file](https://github.com/JianGangLi/vscode-picgo-paste-for-wayland/blob/HEAD/url)
支持环境
| 平台 |
剪贴板实现 |
状态 |
| macOS |
osascript |
✅ |
| Windows |
PowerShell Clipboard |
✅ |
| Linux Wayland |
wl-paste |
✅ |
| Linux X11 |
xclip 回退 |
✅ |
前置要求
1. 安装 PicGo
本扩展支持两种上传后端,推荐优先使用 PicGo Desktop。
方式一:PicGo Desktop(推荐)
- 安装并启动 PicGo Desktop
- 在 PicGo 中配置好图床
- 开启 PicGo Server,默认端口是
36677
- 建议开启“上传后复制链接”或等效选项,便于你在 PicGo 里确认上传结果
本扩展会优先请求 http://127.0.0.1:36677/upload。如果 PicGo Desktop 正在运行且 Server 已开启,就会直接走桌面客户端上传。
方式二:PicGo CLI
npm install -g picgo
picgo -v
然后先确认命令行上传可用:
picgo upload /path/to/test.png
2. Linux / Wayland 依赖
如果你在 Linux 下使用,建议安装以下依赖:
# Wayland 必需
sudo pacman -S wl-clipboard
# X11 / 回退兼容建议安装
sudo pacman -S xclip
其他发行版可安装同名或等效包:
- Debian / Ubuntu:
sudo apt install wl-clipboard xclip
- Fedora:
sudo dnf install wl-clipboard xclip
Arch Linux / PicGo Desktop 说明
如果你在 Arch Linux 上使用 PicGo Desktop,只要满足下面两个条件,本扩展即可工作:
- PicGo Desktop 能正常启动
- PicGo Server 已开启,端口为
36677
这包括你提到的这种场景:
- 在 Arch 上安装了由
.deb 包debtap重新打包得到的 PicGo Desktop
- 只要它本身能运行,并且 Server 正常监听,本扩展不关心它具体是通过什么打包方式安装的
换句话说,对本扩展来说,关键不是安装来源,而是:
- PicGo Desktop 正在运行
127.0.0.1:36677 可访问
- 图床已经在 PicGo 里配置完成
Wayland 下的支持情况
在 Wayland 环境下,扩展会优先使用 wl-paste 读取剪贴板内容,并区分不同 MIME 类型来处理:
- 图片剪贴板,如
image/png
- 文件管理器复制的文件 URI,如
text/uri-list
- GNOME / Linux 文件复制相关文本格式
- 普通文本路径和 Markdown 形式的相对路径
目前适合以下常见用法:
- 截图后直接
Ctrl+V
- 浏览器或图片工具里复制图片后
Ctrl+V
- Linux 文件管理器中复制文件后,在 Markdown 中
Ctrl+V
- 用
Ctrl+Alt+V 手动触发上传当前剪贴板里的图片或文件
配置 PicGo 图床
如果你使用 PicGo CLI,可以先配置上传器:
picgo set uploader
或者直接编辑 ~/.picgo/config.json:
{
"picBed": {
"uploader": "github",
"current": "github",
"github": {
"repo": "username/repo-name",
"branch": "main",
"token": "your-github-token",
"path": "images/"
}
}
}
使用方法
方法一:直接粘贴
- 复制图片,或在文件管理器中复制文件
- 在 VS Code 中打开 Markdown 文件
- 按
Cmd+V 或 Ctrl+V
- 扩展自动上传并插入 Markdown 引用
方法二:手动触发上传
- macOS:
Cmd+Alt+V
- Windows / Linux:
Ctrl+Alt+V
方法三:命令面板
打开命令面板,执行:
PicGo: Upload Image from Clipboard
配置项
在 VS Code 设置中搜索 picgo-paste:
| 配置项 |
说明 |
默认值 |
picgo-paste.picgoPath |
PicGo CLI 路径 |
picgo |
picgo-paste.autoUploadOnPaste |
粘贴时自动上传 |
true |
picgo-paste.useDesktopClient |
优先使用 PicGo Desktop Server |
true |
示例:
{
"picgo-paste.picgoPath": "/usr/bin/picgo",
"picgo-paste.autoUploadOnPaste": true,
"picgo-paste.useDesktopClient": true
}
说明:
useDesktopClient: true 时,优先走 PicGo Desktop 的 HTTP Server,失败后回退到 PicGo CLI
useDesktopClient: false 时,直接使用 PicGo CLI
支持的文件类型
扩展会根据扩展名推断 MIME 类型,支持常见图片和文件上传。
| 类别 |
文件类型 |
| 图片 |
jpg, jpeg, png, gif, webp, svg, bmp, ico |
| 文档 |
pdf, doc, docx, xls, xlsx, ppt, pptx |
| 文本 |
txt, md, json, xml, html, css, js |
| 压缩 |
zip, tar, gz |
| 音视频 |
mp3, mp4, wav, avi, mov |
| 其他 |
wasm 等 |
上传非图片文件时,会生成普通链接,例如:
[archive.zip](https://example.com/archive.zip)
安装扩展
从 VSIX 安装
npm install
npm run compile
npm install -g @vscode/vsce
vsce package
然后在 VS Code 中:
- 打开扩展面板
- 点击右上角
...
- 选择“从 VSIX 安装”
- 选择生成的
.vsix 文件
调试运行
在 VS Code 中打开项目,按 F5 启动 Extension Development Host。
常见问题
粘贴后没有反应
请先确认:
- 当前编辑器是 Markdown 文件
- PicGo 已配置好图床
- PicGo Desktop 正在运行,或
picgo CLI 命令可用
- Linux Wayland 下已安装
wl-clipboard
提示找不到 picgo
先查找命令位置:
which picgo
然后在 VS Code 设置中配置完整路径,例如:
"picgo-paste.picgoPath": "/usr/bin/picgo"
Wayland 下复制文件后上传失败
先检查 wl-paste 是否可用:
wl-paste --list-types
如果命令不存在,请安装:
sudo pacman -S wl-clipboard
无法使用 PicGo Desktop
请依次检查:
- PicGo Desktop 是否真的在运行
- PicGo Server 是否已开启
- 端口是否为
36677
- 图床配置是否正确
如果 Desktop Server 不可用,扩展会自动回退到 PicGo CLI。
想看扩展到底读到了什么剪贴板内容
现在扩展会把调试信息写入 VS Code 输出面板:
- 打开
视图 -> 输出
- 在右上角下拉框选择
PicGo Paste
- 再按一次
Ctrl+V 或 Ctrl+Alt+V
Wayland 环境下你可以看到:
- 当前剪贴板暴露了哪些 MIME 类型
- 扩展读取到了哪种文本内容
- 是否解析出了本地文件路径
- 是否走了 PicGo Desktop 或 CLI
技术实现
- 使用 VS Code 的
DocumentPasteEditProvider 拦截粘贴
- 优先使用 PicGo Desktop 的 HTTP Server 上传
- PicGo Desktop 不可用时自动回退到 PicGo CLI
- Linux Wayland 下优先使用
wl-paste
- 支持文件 URI、相对路径、Markdown 链接等本地路径解析
License
MIT