💡 前言

在前幾天的文章中，我們從零到有學會了如何初始化擴充套件專案、註冊自訂指令，甚至透過 Webview API 在 VS Code 內打造了炫酷的互動儀表板。

當你辛苦開發好一個實用的外掛後，總會希望能讓團隊成員、朋友，甚至是全球數以千萬計的開發者都能下載使用。今天 Day 27 我們要來解鎖 VS Code 開發之旅的最後一哩路——將擴充套件打包、申請發布者帳號，並正式上架到官方的 VS Code Marketplace 與 Open VSX 市集！

🎯 本篇重點

1. 申請 VS Code 官方發布者帳號 (Publisher ID)
2. 安裝與使用官方打包工具：vsce (Visual Studio Code Extensions)
3. 檢查 package.json 的上架必要欄位 (Icon, README, License)
4. 執行打包 (vsce package) 與正式發布 (vsce publish)

🔑 1. 申請發布者帳號 (Publisher ID)

要在 VS Code Marketplace 上架外掛，你需要先建立一個發布者身分：

1. 前往 Azure DevOps 平台 並使用微軟帳號登入（VS Code 市集的後端是由 Azure DevOps 支援）。
2. 建立一個組織 (Organization)。
3. 點擊右上角的個人頭像，進入 Users 或 Personal access tokens (PAT)。
4. 建立一組新的 Personal Access Token：
   • Name：輸入任意名稱（例如 VS Code Extension Token）。
   • Expiration：選擇有效期限（建議選 90 天或更長）。
   • Scopes：在權限列表中，務必勾選 Marketplace (Acquire / Manage)。
5. 建立完成後，把這串長長的 Token 複製並妥善保存（它只會顯示一次！）。

🛠️ **2. 安裝與設定官方打包工具 vsce**

vsce 是官方提供的命令列工具，負責將你的 TypeScript 專案打包成 .vsix 安裝檔，並推送到市集。

在終端機執行以下指令進行全域安裝：

npm install -g vsce

安裝完成後，在終端機登入你的發布者帳號：

vsce login <你的 Publisher ID>

系統會提示你貼上剛剛在 Azure DevOps 產生的 Personal Access Token，驗證成功後就完成綁定囉！

📋 3. 檢查 package.json 的發布必要欄位

在執行打包之前，請確保你的專案根目錄下 package.json 包含以下市集規定必須的欄位，否則會被系統拒絕上架：

{
  "name": "my-awesome-extension",
  "displayName": "My Awesome Extension",
  "description": "這是一個超棒的 VS Code 輔助外掛",
  "version": "1.0.0",
  "publisher": "你的PublisherID",
  "icon": "images/icon.png",
  "repository": {
    "type": "git",
    "url": "https://github.com/yourname/my-awesome-extension"
  },
  "license": "MIT",
  "engines": {
    "vscode": "^1.80.0"
  }
}

💡 小建議：
• icon：準備一張 128x128 像素以上的 PNG 圖片放在專案中，精美的圖標能大幅增加下載意願。
• README.md：寫一段清晰的介紹與使用說明（支援 GIF 動態圖展示更佳），這會直接顯示在 Marketplace 的外掛首頁上！

📦 4. 打包 (vsce package) 與發布 (vsce publish)

一切準備就緒後，就可以開始打包與發布了：

步驟 A：在本機打包成 .vsix 檔案

在專案終端機執行：

vsce package

執行完畢後，專案根目錄會多出一个 .vsix 結尾的檔案（例如 my-awesome-extension-1.0.0.vsix）。你可以把這個檔案傳給同事，讓他們透過 VS Code 的「從 VSIX 安裝」直接離線安裝測試！

步驟 B：正式發布至官方市集

如果你希望全世界都搜尋得到你的外掛，只需執行：

vsce publish

vsce 會自動在背景完成打包、版本檢查並推送到 VS Code Marketplace。大約 1 到 5 分鐘後，你就能在官方市集上搜尋到你的外掛了！🎉