VSCode+PicGo实现Markdown图床自动同步

前言

之前写过一篇关于VSCode写Markdown文档的文章,但是使用的方式最终图片没有实现自动上传到GitHub图床,这次换一个方案尝试

这次使用 PicGo 图片上传工具,在VSCode中再次配置,看能否成功

本地安装PicGo

先看下PicGo桌面端是什么情况,配置走一遍流程,看下是否成功自动上传图片到图床,图床服务使用国内SM.MS免费图床服务

PicGo下载地址

github.com/Molunerfinn...

这是github下载地址,如果打不开github,可以尝试配置github dns地址,网上搜一下,或者直接开代理

我的是win11系统,直接下载Windows 64bit版本

这logo做的还是蛮好看的

双击安装包后直接提示风险,直接点击仍要运行

安装时,如果改默认路径,换个英文路径,如D:\Application\PicGo\ 防止中文路径导致程序功能不正常

这里面是有毒吗,360又拦了

继续允许

安装后界面不会自动打开,需要手动打开,界面竟然默认半透明,有点意思

这里默认就是SM.MS 图床服务,也可以切换其他服务,先测试下

这里做了一个测试,如果不做任何配置,直接上传图片,会提示图片上传失败

配置图床服务

使用SM.MS图床服务,SM.MS 官网地址 smms.app/

沃日啊,怎么关闭注册了功能了,搜了一下资料,官方长期策略,用不了了

换腾讯云COS试试,扫码登录后,控制台里找对象存储COS

开通COS领取免费额度资源包,创建存储桶,设置访问权限时选择 "公有读私有写",这样确保图片可公开访问

其他配置默认下一步后创建就好了

在控制台搜访问管理->访问密钥->API密钥管理 新建密钥,保存好SecretId 和 SecretKey

在 PicGo 桌面端选图床设置,选择腾讯云COS

然后设置图床配置名设定SecretId设定SecretKey设定Bucket存储AppId设定存储区域

配置好以后,设置为默认图床

上传图片后,提示失败

设置存储桶的CORS设置,允许跨域访问

还是上传失败,奇了怪了

查了PicGo里面的日志文件,最新日期的错误输出

css 复制代码
2025-12-17 15:10:59 [PicGo WARN] failed 
2025-12-17 15:10:59 [PicGo ERROR] {
  "method": "POST",
  "url": "http://ap-beijing.file.myqcloud.com/files/v2/xxx/xxx/7151057953.png",
  "statusCode": 403,
  "message": "Request failed with status code 403",
  "stack": {},
  "response": {
    "status": 403,
    "statusCode": 403,
    "body": ""
  }
} 

请求403,禁止访问,可能PicGo客户端的问题

排查错误,发现里面有个默认极智压缩选项,默认是开着的,关闭后,上传成功

分别用选中上传和截图上传,结果都成功,在相册中可以查看内容

复制图片链接,在VSCode中粘贴,图片也显示正常

less 复制代码
![](https://images-1255811342.cos.ap-beijing.myqcloud.com/20251217160448270.png)

![](https://images-1255811342.cos.ap-beijing.myqcloud.com/9905c258279b9740209ef8006947a245.jpg)

现在图床服务没问题了,接下来在VSCode中测试写文档自动上传的功能效果

配置VSCode-PicGo

在VSCode中安装PicGo插件,然后配置插件

选择默认图床为tcyun(腾讯云COS)

然后对着PicGo客户端把对应的参数都配上就行

插件和客户端区别

PicGo 客户端默认支持剪贴板监听自动上传,VSCode 插件完全不同,没有内置自动上传功能

VSCode 图片使用快捷键上传

Windows系统

  • 上传剪贴板图片快捷键 Ctrl+Alt+U
  • 上传本地图片快捷键 Ctrl+Alt+E

其他系统环境,如果需要自行搜索

小结

现在就可以在VScode中通过剪贴板或者快捷键上传图片了,编码和文档编写更轻松了

欢迎大家讨论交流,如果喜欢本文章或感觉文章有用,动动你那发财的小手点赞、收藏、关注再走呗 ^_^

微信公众号:草帽lufei

相关推荐
十五年专注C++开发10 小时前
Typora:优雅的 Markdown 编辑器
编辑器·markdown
掘金安东尼1 天前
VSCode V1.107 发布(2025 年 11 月)
前端·visual studio code
单身的人上天堂1 天前
开发中使用iconfont预览太麻烦?我开发了一款VSCode插件来提升效率
前端·javascript·visual studio code
han_2 天前
手把手教你写一个VSCode插件,从开发到发布全流程
前端·javascript·visual studio code
小灰2 天前
VS Code插件的发布与自动化
visual studio code
李新_3 天前
基于Markwon封装Markdown组件
android·aigc·markdown
king王一帅3 天前
AI 时代真正流式解析+渲染双重优化的 Incremark
前端·ai编程·markdown
想努力找到前端实习的呆呆鸟5 天前
vscode编写vue代码的时候一聚焦就代码块变白?怎么回事如何解决
vue.js·visual studio code
蓝冰露6 天前
把chatgpt聊天记录保存下来
chrome·ai·chatgpt·大模型·markdown·chrome devtools