自制 vscode 扩展包

将已有的 vscode 扩展打包成为扩展包，方便快速分享给他人使用。

必要的前置工具

参考微软官方的文档 Your First Extension，可以通过 Yeoman 和 VS Code Extension Generator 搭建基础环境。

安装这两个工具

bun i yo generator-code -g

生成项目基础环境

yo code

交互式生成

• 指定扩展的类型，这里选择扩展包 New Extension Pack
• 将当前已安装的扩展添加至扩展包 Yes
• 扩展包命名
• 扩展包唯一标识
• 扩展包描述
• 使用 git 管理 Yes

生成的配置文件示例

package.json

{
  "name": "oh-my-extension",
  "displayName": "oh-my-extension",
  "description": "the collection of extensions for personal use",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.97.0"
  },
  "categories": [
    "Extension Packs"
  ],
  "extensionPack": [ 
    "alduncanson.react-hooks-snippets", 
    "astro-build.astro-vscode", 
    "aykutsarac.jsoncrack-vscode", 
    "biomejs.biome", 
    "bradlc.vscode-tailwindcss", 
    "dracula-theme.theme-dracula", 
    "dsznajder.es7-react-js-snippets", 
    "formulahendry.auto-close-tag", 
    "formulahendry.auto-complete-tag", 
    "formulahendry.auto-rename-tag", 
    "gruntfuggly.todo-tree", 
    "quicktype.quicktype", 
    "rooveterinaryinc.roo-cline", 
    "rust-lang.rust-analyzer", 
    "sdras.vue-vscode-snippets", 
    "simonsiefke.svg-preview", 
    "tamasfe.even-better-toml", 
    "usernamehw.errorlens", 
    "vscode-icons-team.vscode-icons", 
    "wscats.vue"
  ]
}

到这里扩展包的配置基本制作完成，后续可以打包为 vsix 文件或发布到 Marketplace。

打包 vsix 文件

打包涉及到另外一个管理管理工具 vsce，能够将项目打包为 VsCode 可以使用的 vsix 文件，并支持通过 CLI 的方式将插件发布至 Marketplace。

这个工具在微软官方文档 Publishing Extensions 中也提到了，需要注意的是通过 CLI 的方式发布是不需要手动打包 vsix 文件的。

安装打包工具

bun i @vscode/vsce -g

进入到项目根目录打包

cd oh-my-extension

vsce package

此时在当前目录下已经生成了 vsix 文件，可以分享 vsix 文件给其他人使用。

手动发布到 Marketplace

默认生成的文件模块还无法直接发布，需要补充 publisher 信息，可以参考这份官方模板。

publisher 的信息需要与在 Marketplace 创建的 publisher 一致，扩展包最终的 Identifier 是由.组成的。

在 package.json 中补充完 publisher 信息后，需要重新打包 vsix 文件。手动发布的方式需要依赖 vsix 文件。

在 Marketplace 中手动上传 vsix 文件进行发布。一般等待几分钟的验证之后，就能在 VsCode 的扩展市场搜索到发布的扩展包。

CLI 发布方式

CLI 发布方式需要先使用 Microsoft 账号创建一个 Azure DevOps 的组织，然后才能创建获取 Personal access token (需要保管好，不能泄露)。

获取到 token 之后，创建新的 publisher。

ID 信息需要和 package.json 中的 publisher 一致。如果之前已经创建过 publisher 了，这里不用重复创建。

接下来，在终端登录 publisher 并输入 token

vsce login <publisher id>

https://marketplace.visualstudio.com/manage/publishers/
Personal Access Token for publisher '<publisher id>': ****************************************************

The Personal Access Token verification succeeded for the publisher '<publisher id>'.

通过 cli 发布，这种方式不需要打包 vsix 文件

vsce publish

等待 Marketplace 验证之后，就能在 VsCode 的扩展市场中搜索到相应的扩展。