使用 VSCode 和 VS-PicList 插件高效管理 Markdown 图片及高效书写

这个组合我简直吹爆，彻底改变了我的书写习惯。使用 VSCode 书写 Markdown 格式时，VS-PicList 插件让图片上传变得更加高效便捷。它支持多种上传方式，并且可以直接删除和转换为 webp 格式。

VS-PicList 是一款功能丰富的 VSCode 扩展，专为无缝图像管理而设计。此扩展使您能够轻松地将图像上传到远程托管服务，并自动将生成的 URL 插入到当前活动的文件中。与其他解决方案不同，VS-PicList 拥有强大的功能集，包括图像压缩、水印和其他高级图像处理功能。

为什么推荐 VS-PicList 插件？

在我使用这款 VS-PicList 时，我也体验了其他不同的插件，例如 Markdown Image，它们也都是非常优秀的插件，但它们不是我们的主角。

插件功能对比

（如有误可以联系博主纠正，仅代表博主个人主观体验给出的参数对比）

功能	Markdown Image	VS-PicList
支持的输出格式	JPG, PNG	JPG, PNG, WebP
图片上传	支持	支持
同步删除云端文件	不支持	支持
图像压缩	不支持	支持
水印	不支持	支持
高级图像处理	不支持	支持
自动插入 URL	支持	支持
拖放上传	支持	支持
上传文件中的所有图像	不支持	支持
上传选定的图像	不支持	支持
远程服务器模式	不支持	支持
删除远程托管服务中的图片	不支持	支持

当然 Markdown Image 不需要在使用时运行其他软件，这也是其优点之一，而使用 VS-PicList 的前提是，你必须同时使用 PicList。

WebP 格式与 PNG 格式对比

其中我们提到，我特别喜欢 PicList 的原因，尤其是支持同步删除云端文件和图片格式转换。也列出了 WebP 格式的图片与 PNG 或 JPG 格式的优势比较。我使用两种格式的例子说明（同一图片都上传在 R2 桶中，只是格式不一样）：

WEBP 格式图片大小： 3.35 MB
直链：https://www.202520.xyz/img/20250209061851070.webp

20250209061851070.webp

20250209063134566.webp
PNG 格式图片大小： 16.08 MB
直链：https://www.202520.xyz/img/20250209061826811.png

20250209061826811.png

20250209063514474.webp

可打开直链对比一下图片画质，肉眼可见效果。你能否看出区别？这正是我选择使用 WEBP 格式的重要原因。WEBP 格式不仅占用更小的存储空间，还能让访问者在浏览你的图片内容时，更快地加载图片内容，减少所需流量。

插件特点

轻松上传：只需单击几下，即可将图像上传到您首选的远程图像托管服务。
拖放上传：将图像从文件资源管理器直接拖放到工作文件中。
全部上传：上传文件中的所有图像。
上传选定：右键单击即可上传选定的图像。
自动插入 URL：该扩展负责将图像 URL 直接插入到您的工作文件中。
图像管理：通过 VSCode 中的 PicList 直接轻松删除存储在远程托管服务中的图像。
高级图像处理：包括对图像压缩、水印和其他上传后操作的支持。
远程服务器模式：支持使用在服务器或远程机器上运行的 PicList 和 piclist-core 服务。

安装与设置

打开 VSCode 左侧边栏，搜索 PicList 或链接下载VS-PicList 并点击安装。我已经安装过了，所以这里显示卸载。安装完成后，关闭并重启 VSCode 使其插件生效。

20250209050645978.webp
进入插件的 键盘快捷方式 默认快捷键可以自己点击修改，你顺手的。最常用的就下面这几个。

20250209052718746.webp

PicList: Upload from clipboard = 从剪贴板上传图像
PicList: Upload from explorer = 从资源管理器上传图像
PicList: Delete Image by PicList = 删除远程托管服务中的图片
进入插件的设置，基本默认设置即可，开发者已经为你设置好了参数，因为你的上传各种参数都是在 PicList 软件中已经进行设置了（当然你得看了我之前那篇博文）。直接使用即可。

20250209052002366.webp

相关参数说明

Upload API URL

这是 PicList 的上传 api URL，默认为http://127.0.0.1:36677/upload

Delete API URL

这是 PicList 的删除 api URL，默认为http://127.0.0.1:36677/delete

Copy Type

默认是 Markdown。

类型	格式
url	`url`
markdown	`![alt](url)`
html	`<img src=url alt=alt>`
ubb	`[img]url[https://www.202520.xyz/img/]`
自定义	`custom`

Custom Type

默认是 ![$filename]($url)

Encode URL

是否在插入文本时编码 URL。默认为 false

Enable upload on drop

是否启用拖放上传。默认为 true

Remote Server Mode

当您在服务器或其他机器上部署 Piclist 或 Piclist-Core 服务时，您可以启用远程服务器模式，然后通过发送文件来启动上传请求。

详细使用看下方 GIF 图就能学会。

Gif 演示教学

从剪贴板上传图像

20250209043708136.gif

从资源管理器上传图像

20250209044657724.gif

从本地路径或 URL 上传图像

20250209044732033.gif

通过拖放操作上传图像

20250209044805821.gif

删除远程托管服务中的图片

20250209044834951.gif

上传文件中的所有图像

20250209044938826.gif

右键单击上传文件中选定的图像

20250209045023293.gif

VSCode 优秀插件推荐

GitHub Copilot

首先打开 GitHub Copilot 进行一些相关设置的开启，其中免费计划：免费使用 Copilot 响应限制为每月 2,000 个代码完成和 50 条聊天消息。

GitHub Copilot 设置
打开 VSCode 左侧边栏，搜索 GitHub Copilot 或链接下载 GitHub Copilot 并点击安装。我已经安装过了，安装完成后，关闭并重启 VSCode 使其插件生效。

GitHub Copilot 安装
内置的 GitHub Copilot 我这个让他修改格式后，他的书写格式会更加标准，可以在我们学习书写 markdown 格式中起到很大的帮助作用，右下角可以自行切换大模型。生成代码、修复错误、询问有关您代码的问题等等… 更多功能等着你自己发掘这里就不多介绍了。

20250209174159420.webp

20250209182028597.webp