最近写了几个 VSCode 扩展，为了方便分发，上架了应用市场。由于 Code 主要分官方的和开源社区的 IDE，需要上架 VS Code Marketplace（微软官方扩展市场）和 Open VSX（VSCodium、Gitpod 等使用）

本文将手把手带你完成两个平台的发布流程，让你的扩展真正上线可用。

准备工作

在正式发布之前，你需要确保扩展已经具备以下内容, 这个是示例参考比较简单：

{
    "name": "cnb-welcome",
    "publisher": "cnbcool",
    "displayName": "cnb-welcome",
    "description": "cnb welcome",
    "version": "0.2.8",
    "icon": "src/images/logo.png",
    "engines": {
        "vscode": "^1.89.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onStartupFinished"
    ],
    "main": "./dist/extension.js",
    "repository": {
        "type": "git",
        "url": "https://cnb.cool/cnb/cool/cnb-welcome.git"
    },
    "contributes": {
        "commands": [
            {
                "command": "cnb.welcome",
                "title": "CNB Welcome"
            },
            {
                "command": "extension.openTerminal",
                "title": "CNB Open Terminal"
            },
            {
                "command": "extension.resetIsFirstRun",
                "title": "CNB ResetIsFirstRun"
            }
        ]
    },
    "scripts": {
        "build": "vsce package",
        "vscode:prepublish": "npm run package",
        "compile": "webpack",
        "watch": "webpack --watch",
        "package": "webpack --mode production --devtool hidden-source-map",
        "compile-tests": "tsc -p . --outDir out",
        "watch-tests": "tsc -p . -w --outDir out",
        "pretest": "npm run compile-tests && npm run compile && npm run lint",
        "lint": "eslint src --ext ts",
        "test": "vscode-test"
    },
    "devDependencies": {
        "@types/mocha": "^10.0.6",
        "@types/node": "18.x",
        "@types/vscode": "^1.89.0",
        "@typescript-eslint/eslint-plugin": "^7.7.1",
        "@typescript-eslint/parser": "^7.7.1",
        "@vscode/test-cli": "^0.0.9",
        "@vscode/test-electron": "^2.3.9",
        "eslint": "^8.57.0",
        "file-loader": "^6.2.0",
        "ts-loader": "^9.5.1",
        "typescript": "^5.4.5",
        "vsce": "^2.15.0",
        "webpack": "^5.91.0",
        "webpack-cli": "^5.1.4"
    },
    "license": "MIT",
    "dependencies": {
        "axios": "^1.9.0",
        "handlebars": "^4.7.8"
    }
}

安装打包工具

• 安装 vsce 工具：

npm install -g @vscode/vsce
# 打包扩展, 会生成一个 .vsix 文件
vsce package

• open-vsx CLI 工具（上传用 open-vsx）

npm install -g ovsx

发布到 VS Code Marketplace

官方文档 发布扩展 很详细，根据步骤来就可以。

创建个人令牌

vsce 只能使用个人访问令牌发布扩展，默认使用 Github 登录就可以。

访问 aex.dev.azure.com,反正跳过来跳过去，主要入口就是 Azure DevOps

随便选择一下 Project 进入，打开您的个人资料图片旁边的用户设置下拉菜单，然后选择个人访问令牌：

在创建新的个人访问令牌模式中，选择令牌的以下详细信息：

方便起见，我设置全部权限，最长有效期为 1 年。

妥善保管好生成 Token

创建发布者

访问设置 Visual Studio Marketplace 发布者管理页面

只需要填 ID 和 Name，不重复就行，我保持一样。

• ID：您的发布商在 Marketplace 中的唯一标识符，将在您的扩展程序 URL 中使用。ID 一旦创建就无法更改。
• 名称：您的发布商的唯一名称，将与您的扩展程序一起显示在 Marketplace 中。这可以是您的公司名称或品牌名称。

发布

先登录，按提示输入 PAT

vsce login <publisher-ID>

当然可以先本地测试, 构建出 vsix 文件，本地安装

vsce package

发布

vsce publish

成功的日志大概如下:

INFO  Publishing 'gaeaflow.gaeaflow-gitspace v1.0.1'...
 INFO  Extension URL (might take a few minutes): https://marketplace.visualstudio.com/items?itemName=gaeaflow.gaeaflow-gitspace
 INFO  Hub URL: https://marketplace.visualstudio.com/manage/publishers/gaeaflow/extensions/gaeaflow-gitspace/hub
 DONE  Published gaeaflow.gaeaflow-gitspace v1.0.1.

发布到 Open VSX Registry

注册账号打开 Open VSX 通过 GitHub 登录就可以了， 需要签一个 VSX Publisher Agreement 申明才能创建 Namespaces

相对来说比较简单，我直接后台上传构建出 vsix 文件

其他注意

需要两个扩展同步发布，以便官方和第三方 IDE 安装

如果有使用 harness(原 gitness)的 Gitspace 功能的，可以使用我提供的插件，也可以使用官方插件。需要设置环境变量 GITNESS_IDE_VSCODE_Plugin_Name=gaeaflow.gaeaflow-gitspace

可以在应用市场直接安装 GaeaFlow Gitspace

下次有时间说说如何集成 k8s gitspace 环境限定版