{T}

VSCode插件实战：图床与压缩功能

在日常的文档编写和博客撰写中，图片是不可或缺的元素。但手动上传图片、获取链接再插入 Markdown 的过程繁琐且低效。本文将向你展示如何利用 AI 编程助手，为一个基于 VS Code 的 Markdown 插件增加“粘贴即上传”的功能，并将图片自动上传到 GitHub 图床。在此基础上，我们还将探讨如何进一步集成图片压缩功能，全面提升你的写作效率。

准备工作：创建你的 GitHub 图床

我们可以选择各大云服务商提供的对象存储服务作为图床，但对于个人使用或项目文档而言，利用免费的 GitHub 公开仓库无疑是更具性价比的选择。

第一步：创建 GitHub 仓库

首先，登录你的 GitHub 账户，创建一个新的 公开（Public） 仓库。这个仓库将专门用于存放我们上传的图片。请注意，仓库必须是公开的，否则图片链接将无法在外部访问。

第二步：生成访问令牌（Token）

为了让我们的插件有权限将图片上传到仓库，需要创建一个 Personal Access Token。

访问 GitHub Token 设置页面，点击 “Generate new token”，选择 “Tokens (classic)”。

为 Token 设置一个可识别的名称，并勾选 repo 权限范围。创建成功后，页面会显示完整的 Token，请务必立即复制并妥善保存，因为这个 Token 只会显示这一次，页面刷新后将无法再次查看。

图片粘贴上传功能

准备工作就绪后，我们开始着手核心功能的开发。这里我们借助 Trae IDE 内置的 AI 助手（Builder with MCP）来完成编码工作。

核心提示词（Prompt）

我们的目标是实现图片粘贴上传功能。在给 AI 下达指令时，需要清晰地描述需求，并考虑到未来的扩展性。

阶段四：图片粘贴上传功能

这是文档 @requirement_analysis.md @technical_architecture.md，只完成任务 @task_breakdown.md 47-61 “阶段四：图片粘贴上传功能”的功能，不要超出范围。

这里涉及到图床服务，目前只支持 Github，你可以提供一个配置选项，便于以后扩展其它图床。

AI 执行过程

AI 接收到指令后，会分析现有代码、拆解任务，并逐步完成代码的编写，包括创建新文件、修改现有文件、添加依赖等。

整个过程完全自动化，AI 完成了所有编码工作，并生成了一份功能使用说明。

配置与实战测试

代码完成后，我们需要在 IDE 中进行配置和测试。这个插件是基于 VS Code API 开发的，因此不仅支持 VS Code，也兼容 Cursor、Trae 等所有基于 VS Code 二次开发的 IDE。

在 Trae IDE 中配置

  1. 打开 Trae IDE 的设置界面。

  2. 在设置中搜索关键词 md-wx-code，快速定位到插件的配置项。

  3. 根据提示，依次填入我们准备好的 GitHub 用户名、Token、图床仓库名等信息。

测试效果

配置完成后，我们就可以开始测试了。

  1. 在任意位置复制一张图片。
  2. 切换到 Markdown 文件，按下 Cmd+V (macOS) 或 Ctrl+V (Windows) 进行粘贴。

操作行云流水，图片几乎是瞬间就出现在了编辑器中，并自动转换成了 Markdown 格式的链接。

为了确认图片是否真的上传成功，我们打开之前创建的 GitHub 仓库查看。可以看到，图片已经按照我们设定的路径成功上传到了 images 文件夹下。

进阶：集成图片压缩功能

通过以上步骤，我们已经拥有了一个高效的图片处理流程。但对于追求极致性能和加载速度的场景（如公共博客），图片大小是关键。因此，在上传前对图片进行无损或有损压缩，是非常有必要的。

接下来，我们将继续借助 AI，为这个功能增加一个“前置处理”步骤：在图片上传到 GitHub 之前，自动调用压缩服务对图片进行处理。

第一回合：当 AI 陷入困境

我们很自然地会想到直接向 AI 下达指令。

提示词：“图片上传之前先对图片做一个无损压缩”

然而，这次实现过程并不顺利。AI 在执行过程中遇到了问题，并陷入了反复修复同一个错误的循环中。尽管我们根据错误日志不断反馈，但 AI 似乎无法找到问题的根源。

这种情况说明，对于稍微复杂的、需要技术选型的任务，直接给出模糊指令可能会让 AI “陷入困境”。对于开发者来说，此时手动介入或许更高效。但本教程旨在探索如何最大化地利用 AI 解决问题，因此我们换一种思路。

第二回合：引导 AI 进行“思考”

我们放弃了上面的修改，开启一个全新的 AI 对话。这次，我们调整了与 AI 的沟通策略，不再是直接命令，而是引导它先做方案设计。

提示词：“图片上传之前先做一个无损压缩，这样可以减少图片大小，请先选择一个最佳的压缩方案，再进行开发”

这个小小的改变带来了显著的效果。AI 没有立即开始编写代码，而是首先调用提供的工具（MCP）去搜索和分析当前流行的图片压缩库，进行技术选型。

在确定了最佳方案（使用 sharp 库）后，AI 才开始编码，并成功实现了功能。它不仅添加了压缩逻辑，还在 package.json 中增加了相关的配置项，允许用户自定义压缩质量和触发压缩的文件大小阈值。

我们可以在编辑器的设置中方便地修改这些选项。

最后的调试与修复

功能开发完成后，我们立即进行测试。将一张图片粘贴到 Markdown 文件中，却发现图片上传失败了。打开开发者工具控制台，我们看到了报错信息。

这是开发过程中的常见情况。我们把错误信息截图发给 AI，并给出清晰的修复指令，同时要求它将之前单独生成的文档合并到项目主 README.md 中，保持文档的统一性。

提示词：“压缩失败，根据错误日志查找原因，进行修复，文档不要单独写一个文件，请写入 README 文件中”

AI 很快定位到了问题（输入和输出使用了相同的文件路径），并进行了修复。

验证最终效果

现在，我们来进行最终的验证。我们从 Trae 官网截取一张图片，其原始大小为 931 KB。

将其复制并粘贴到编辑器中。

上传成功后，我们去 GitHub 仓库查看，发现图片大小已经变成了 275 KB，压缩率达到了 70% 以上，效果非常显著！

至此，我们的图片粘贴、压缩、上传功能全部开发完成。

同步更新项目文档

由于图片压缩功能是我们在初始需求之外后期增加的，为了保持项目文档的完整性和时效性，我们需要将这一变更同步更新到项目的需求和技术架构文档中。这同样可以交给 AI 来完成。

提示词：“将当前增加的功能同步更新到 docs 需求文档和技术架构文档中”

AI 会自动读取相关文档，理解新增功能，然后将对应的需求描述和技术实现方案补充到文档的合适位置。保持文档与代码的同步，是良好项目管理的重要一环。

总结

本节我们增加了图片粘贴上传至 GitHub 图床以及自动压缩的功能。我们不仅完成了从需求提出、AI 编码到配置测试的全过程，还特别探讨了与 AI 协作的不同策略：当面对复杂任务时，引导 AI “先思考、再开发”比直接下达命令更有效。