🚀 GateX 上架记:从打包到 Marketplace 的踩坑之旅

上一篇文章记录了 GateX 的诞生过程——从发现 Agent Maestro 的 120 秒超时限制,到自己动手实现一个功能更完善的 AI Gateway 扩展。

代码写完了,测试通过了,接下来应该很简单:发布到 VS Code Marketplace,让大家都能用上。

我天真地以为这只需要几分钟。

📦 打包:这步很顺利

打包 VS Code 扩展用的是官方的 vsce 工具:

cd gatex
npm install
npm run compile
npx vsce package

一切顺利,生成了 gatex-0.1.0.vsix,大小 112 KB。完美。

 DONE  Packaged: gatex-0.1.0.vsix (16 files, 111.57 KB)

接下来,登录 Marketplace 发布——

然后噩梦开始了。

🔐 Azure DevOps:一场与订阅的战斗

VS Code Marketplace 的发布需要一个 Personal Access Token (PAT),而这个 PAT 必须从 Azure DevOps 获取。

第一个坑:portal.azure.com ≠ dev.azure.com

我用 GitHub 账号登录后,被重定向到了 portal.azure.com——这是 Azure 云服务的管理门户,不是 Azure DevOps!

portal.azure.com → Azure 云服务(虚拟机、数据库)
dev.azure.com   → Azure DevOps(代码仓库、Marketplace)

花了十分钟才意识到这是两个完全不同的服务。

第二个坑:订阅计费限制

好不容易进入 dev.azure.com,创建组织时又卡住了:

This subscription has a monetary limit set and cannot be used 
for Azure DevOps billing. Please choose a different subscription 
or remove the spending limit.

我的 Azure 订阅有消费限制,无法用于 Azure DevOps 计费。

等等,我只是想发布一个免费扩展,为什么需要计费设置?

更糟糕的是,页面上没有「跳过」按钮,也没有「无需计费」选项。我尝试了各种方法:

  • 切换 Microsoft 账号 ❌
  • 用 GitHub 账号登录 ❌
  • 创建新订阅 → 需要信用卡 ❌
  • 移除消费限制 → 也需要信用卡 ❌

折腾了快两个小时,我开始怀疑人生。

💡 转机:直接上传 .vsix

就在我准备放弃的时候,突然想到:既然 Marketplace 有管理后台,能不能直接上传打包好的文件?

打开 marketplace.visualstudio.com/manage,用 Microsoft 账号登录,发现——

居然可以直接上传 .vsix 文件!

完全不需要 PAT,不需要 Azure DevOps 组织,不需要任何订阅设置。

发布步骤

  1. 创建 Publisher

    • 访问 marketplace.visualstudio.com/manage
    • 点击「Create publisher」
    • 填写 Publisher ID(要和 package.json 里的一致!)
  2. 上传扩展

    • 点击「+ New extension」→「Visual Studio Code」
    • 拖拽 .vsix 文件上传
    • 等待验证(大约 1-2 分钟)
    • 完成!

就这么简单。我之前折腾的两个小时完全是走了弯路。

🎨 图标优化:小细节大影响

上传完成后,我发现图标在 Marketplace 上显示有点奇怪——黑边太多,主体太小。

原始图标是 766 KB 的大图,先压缩:

# 压缩并调整尺寸
sips -Z 256 images/gatex.png
# 766 KB → 44 KB

然后裁剪调整,去掉多余的黑边,让闪电符号更突出:

# 裁剪中心区域(上面多留一点,下面多裁一点)
sips --cropOffset 30 38 -c 180 180 gatex.png
# 放大回 256x256
sips -Z 256 gatex.png

重新打包上传,效果好多了。

经验:Marketplace 的图标显示在各种尺寸下都要好看,建议:

  • 尺寸:至少 128x128,推荐 256x256
  • 大小:控制在 100KB 以内
  • 设计:主体要足够大,留白不要过多

✅ 发布成功

最终,GateX 0.1.0 成功上架:

👉 marketplace.visualstudio.com/items?itemName=BaoliWang.gatex

在 VS Code 里搜索「GateX」就能找到并安装。

 ██████╗  █████╗ ████████╗███████╗██╗  ██╗
██╔════╝ ██╔══██╗╚══██╔══╝██╔════╝╚██╗██╔╝
██║  ███╗███████║   ██║   █████╗   ╚███╔╝ 
██║   ██║██╔══██║   ██║   ██╔══╝   ██╔██╗ 
╚██████╔╝██║  ██║   ██║   ███████╗██╔╝ ██╗
 ╚═════╝ ╚═╝  ╚═╝   ╚═╝   ╚══════╝╚═╝  ╚═╝
      🚀 NOW LIVE ON MARKETPLACE 🚀

📝 发布清单

给未来的自己(和读者)留个备忘:

发布前检查

  • package.json 中的 publisher 和 Marketplace Publisher ID 一致
  • package.json 中的 version 已更新
  • package.json 中的 repository 填写正确
  • README.md 内容完整,包含安装使用说明
  • 图标尺寸合适(推荐 256x256),大小 < 100KB
  • LICENSE 文件存在

打包发布

# 编译
npm run compile

# 打包
npx vsce package

# 上传到 marketplace.visualstudio.com/manage

更新版本

修改 package.json 中的 version,重新打包上传即可。

💡 经验总结

  1. 官方文档不是唯一路径 —— 微软文档推荐的 PAT 方式需要 Azure DevOps 组织,但直接上传 .vsix 更简单,对于个人开发者足够用了。

  2. portal.azure.com ≠ dev.azure.com —— 这两个是完全不同的服务,别搞混了。

  3. 图标很重要 —— Marketplace 的第一印象就是图标,值得花时间调整。

  4. 版本号从 0.1.0 开始 —— 给后续更新留空间,也表示这是早期版本,用户会更包容 bug。


从「干掉 Agent Maestro」到「上架 Marketplace」,前后大约 48 小时。

开发用了 24 小时,发布流程的坑占了 2 小时。

如果你也打算发布 VS Code 扩展,希望这篇踩坑记录能帮你节省一些时间。

GateX —— Your gateway to AI models.

留言与讨论