上架目標

Visual Studio Marketplace - Visual Studio Code

效益

• 留存個人的擴充喜好
• 分享有用的擴充套件

前置作業

• 要有個 VSTS (Visual Stuido Tems Services) 帳號
• 要安裝 Node.js
• 要安裝 vsce (Visual Studio Code Extension Manager) 及 Yeoman generator

  npm install -g vsce
  npm install -g yo generator-code
  

建立 Marketplace 的 publisher 帳號

• 於 VSTS 中製作 Personal Access Token (提供 vsce 使用)

  • 前往 VSTS > 個人帳號 > Security > Personal access tokens，其網址為： https://[您的 VSTS 帳號].visualstudio.com/_details/security/tokens
  • 新增 Personal access tokens
    • Description 可填 vsce
    • Expires In 可選 1 year
    • Accounts 必須選 All accessible accounts
    • Authorized Scopes 必須選 All scopes
  • 拷貝所取得的 Personal Access Token 值

• 建立 Marketplace 的 publisher 帳號

  • 方案一，於 Marketplace publisher management page 註冊
  • 方案二，使用 vsce 指令

    vsce create-publisher [您想要的帳號名稱，不用括號]
    

  • 在驗證 Personal Access Token 時，將 VSTS 取得之 Token 值貼上

建立 Extensions Pack 的專案

• 執行命令列

  yo code
  

• 選擇 New Extension Pack
• 描述擴充包的名稱 (What's the name of your extension?)
• 命名擴充包的 ID (What's the identifier of your extension?)
  • 限英數字，無符號
  • 無需前綴帳號名稱，事後會自動加
• 簡介擴充包 (What's the description of your extension?)
• 填寫 Marketplace 的 publisher 帳號
• 最後，將產生 Extensions Pack 的專案文件夾於當下目錄

編輯 Extensions Pack 的專案

• 用 vs code 開啟所產生的專案
• 於檔案 package.json 的 extensionDependencies 陣列中，添加所需的 Extensions (的ID)
• 編寫 README.md (將成為 Extensions Pack 的頁面內容)
• (選用)
  • 初始化專案 git，並建置 github 儲存庫
  • 於檔案 package.json 中，添加

      "repository": {
      "type": "git",
      "url": "[您的 github 專案網址]"
  },
  

發佈 Extensions Pack 的專案到 Marketplace

• 執行命令列

  vsce publish
  

• 看成果，收工結束~

文件參考

• Visual Studio Code Extension Packs
• Publishing Visual Studio Code Extensions
• The Yo Code Visual Studio Code Extension Generator