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

周润发2025-02-092025-02-10

VSCode + VS-PicList

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

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

为什么推荐 VS-PicList 插件？

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

Markdown Image

插件功能对比

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

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

当然 Markdown Image 不需要在使用时运行其他软件，这也是其优点之一，而使用 VS-PicList 的前提是，你必须同时使用 PicList。此前，我们介绍过这款软件：PicList - 一款高效的云存储和图片托管平台管理工具。（看了才能理解我在说什么）本篇博文是对其进行一个使用补充。

WebP格式与PNG格式对比

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

WEBP格式图片大小： 3.35 MB
直链：https://img.aizrf.com/20250209061851070.webp
PNG格式图片大小： 16.08 MB
直链：https://img.aizrf.com/20250209061826811.png

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

插件特点

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

安装与设置

打开 VSCode 左侧边栏，搜索 PicList 或链接下载VS-PicList并点击安装。我已经安装过了，所以这里显示卸载。安装完成后，关闭并重启 VSCode 使其插件生效。
进入插件的 键盘快捷方式 默认快捷键可以自己点击修改，你顺手的。最常用的就下面这几个。

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

相关参数说明

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[/img]`
自定义	`custom`

Custom Type

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

Encode URL

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

Enable upload on drop

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

Remote Server Mode

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

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

Gif 演示教学

从剪贴板上传图像

从资源管理器上传图像

从本地路径或 URL 上传图像

通过拖放操作上传图像

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

上传文件中的所有图像

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

VSCode 优秀插件推荐

GitHub Copilot

首先打开 GitHub Copilot 进行一些相关设置的开启，其中免费计划：免费使用 Copilot 响应限制为每月 2,000 个代码完成和 50 条聊天消息。
打开 VSCode 左侧边栏，搜索 GitHub Copilot 或链接下载 GitHub Copilot 并点击安装。我已经安装过了，安装完成后，关闭并重启 VSCode 使其插件生效。
内置的 GitHub Copilot 我这个让他修改格式后，他的书写格式会更加标准，可以在我们学习书写 markdown 格式中起到很大的帮助作用，右下角可以自行切换大模型。生成代码、修复错误、询问有关您代码的问题等等…更多功能等着你自己发掘这里就不多介绍了。