发布VS Code主题踩坑一堆,这两条发布路线到底怎么走才稳?

2,127字
9–14 分钟
in

发布一个自己亲手调出来的代码主题,本来想着跟发个npm包一样顺手就能搞定,结果发现完全不是那么回事。Visual Studio Marketplace和Open VSX这两个地方得分别折腾,中间还卡在Azure DevOps的账号认证上,各种报错让人抓狂。这里把亲手试出来的两条发布路线掰开揉碎讲清楚,从准备包到最终让主题出现在插件市场,每一步都带上避坑经验。

目录

主题发布前的准备

在开始打包之前,package.json这个文件就是整个主题的身份证,里面几个字段要是填不对,后面所有操作都白搭。主题的名字不能带scope,比如@someone/awesome-theme这种写法在Open VSX那边会直接被拒收,老老实实写成awesome-theme就行。为了让主题在市场上看起来更显眼,可以准备一张128×128像素的方形图标,在package.json里用icon字段指向这张图片的路径,这样插件列表里就能看到专属标识了。

{
  "name": "twilight-cosmos-theme",
  "icon": "images/icon.png",
  "contributes": {
    "themes": [
      {
        "label": "Twilight Cosmos",
        "uiTheme": "vs-dark",
        "path": "./themes/twilight-cosmos-color-theme.json"
      }
    ]
  },
  "keywords": [
    "theme",
    "dark theme",
    "twilight",
    "cosmos",
    "color-theme",
    "dark",
    "purple",
    "blue"
  ]
}

contributes这个字段是编辑器识别主题的关键入口,uiTheme决定了主题属于亮色还是暗色系,vs-dark代表暗色主题,vs是亮色。label则是用户在切换主题时看到的名称,可以起得稍微有辨识度一点。关键词这块尽量多塞几个跟颜色、风格相关的词,这样别人搜“紫色主题”或者“暗色主题”的时候能更容易翻到。

发布到Visual Studio Marketplace

微软官方的插件市场走的是vsce这套工具,但前提得有个Azure DevOps账号,然后从里面生成个人访问令牌。这里遇到过页面一直转圈、找不到生成入口的情况,后来发现放一两天再登就好了,也不知道是服务器抽风还是账号同步有延迟。令牌生成的时候有效期最多只能选一年,不像npm token那样能永久有效,这一点得记着到期前续一下。

有了令牌之后,先通过命令行登录,登录用的ID是发布者ID,不是账号的显示名称。

npx vsce login your-publisher-id

执行完会提示输入令牌,把之前生成的那一串贴进去就行。登录成功后直接运行发布命令,工具会自动打包并上传到Visual Studio Marketplace。

npx vsce publish

如果走命令行这条路卡住了,比如Azure DevOps怎么都登不上,还有另一条手动上传的路可以走。先执行打包命令,生成一个.vsix文件。

npx vsce package

接着打开Visual Studio Marketplace的网页,找到发布扩展的入口,点新建扩展,然后把刚才生成的.vsix文件直接拖拽到上传区域,等进度条走完就完事了。这两条路不管走哪条,新发布的主题大概需要几分钟才能在商店里搜到。

发布到Open VSX

很多基于VS Code的编辑器,像Cursor这类,用的其实是Open VSX这个市场。往这里发布主题比微软市场多几个步骤,但好在访问令牌可以长期有效,不用每年折腾一次。首先得用GitHub账号登录Open VSX网站,然后关联Eclipse Foundation的账号,在网站上找到创建发布者命名空间的入口。

创建命名空间的时候填的ID就是后面package.json里要用的publisher字段值。这一步完成之后,在项目根目录下运行npx ovsx publish,第一次执行会提示输入令牌,这个令牌在Open VSX网站的账号设置里生成,复制粘贴过去就能发布成功。

npx ovsx publish
步骤操作说明耗时预估
登录GitHub授权登录Open VSX1分钟
关联绑定Eclipse Foundation账号2分钟
创建新建发布者命名空间1分钟
发布执行ovsx发布命令30秒

让主题能被更多人搜到

主题发布之后,在README.md里放几张截图很有必要,别人点进详情页第一眼就能看到配色长啥样。但这两个市场都不支持相对路径,直接写./screenshot.png会显示裂图。最稳的办法是把图片推到GitHub仓库,然后用raw的绝对链接。

![代码截图](https://raw.githubusercontent.com/用户名/仓库名/main/images/screenshot.png)

如果想在Visual Studio Marketplace拿到那个“已验证”的小勾勾,得等主题发布满六个月之后才能申请。Open VSX这边倒是没有硬性等这么久,但需要去Eclipse Foundation提个GitHub issue,说明想认领这个命名空间,附上仓库地址,那边审核通过之后就能拿掉那个未认领的警告标志。