💡 前言

在前幾天的文章中，我們學習了如何自訂 Snippets、調整 settings.json、撰寫自動化 Tasks，以及打造個人專屬的快捷鍵。但你有沒有想過：如果市面上找不到符合你需求的套件，能不能自己動手開發一個 VS Code 擴充套件呢？

答案是肯定的！VS Code 本身就是一個基於 Electron 與 Web 技術（HTML, CSS, JavaScript/TypeScript）打造的強大編輯器，這意味著任何網頁開發者都能輕鬆上手外掛開發。

今天 Day 25 我們要來體驗 VS Code 擴充套件開發的基礎流程，帶你從零到有打造並執行你的第一個自訂外掛！

🎯 本篇重點

1. VS Code 擴充套件的底層架構與技術棧
2. 安裝官方鷹架工具 Yo Code 與初始化專案
3. 探索套件核心設定檔：package.json 與啟用點 (activationEvents)
4. 撰寫第一個「Hello World」命令並在本機進行偵錯 (Extension Development Host)

⚙️ 1. 開發前的環境準備

要開發 VS Code 擴充套件，你的電腦需要具備以下環境：
• Node.js（建議安裝 LTS 長期支援版本）
• 透過 npm 安裝兩個官方必備的全域工具：yo（Yeoman 產生器）與 generator-code（VS Code 專屬鷹架）。

打開終端機執行以下指令進行安裝：

npm install -g yo generator-code

🏗️ 2. 初始化你的第一個擴充套件專案

Step 1：執行產生器

在終端機輸入：

yo code

Step 2：互動式選單設定

產生器會透過互動介面詢問你幾個問題：

1. What type of extension do you want to create? ➔ 選擇 New Extension (TypeScript)（推薦使用 TypeScript，型別安全且好維護）。
2. What's the name of your extension? ➔ 輸入外掛名稱（例如 my-first-extension）。
3. What's the identifier? ➔ 保持預設即可。
4. What's the description? ➔ 簡短描述外掛功能。
5. Initialize a git repository? ➔ 選擇 Yes。

初始化完成後，用 VS Code 打開這個新產生的專案資料夾！

📂 3. 專案結構與 package.json 核心解析

展開專案目錄，你會看到幾個關鍵檔案：
• package.json：整個外掛的「身分證與設定中樞」。
• src/extension.ts：外掛的主要程式碼邏輯入口。

來看 package.json 中最核心的兩個區塊：

{
  "name": "my-first-extension",
  "displayName": "My First Extension",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.80.0"
  },
  "activationEvents": [],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "my-first-extension.helloWorld",
        "title": "Hello World"
      }
    ]
  }
}

• contributes.commands：宣告這個外掛要在命令面板（Command Palette）中註冊什麼指令。
• activationEvents：決定外掛在什麼時候被喚醒載入（新版本的 VS Code 預設會根據 contributes 自動激活，保持輕量高效）。

💻 4. 編寫核心邏輯與本機偵錯

打開 src/extension.ts，你會看到官方預設的 Hello World 程式碼：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  console.log('Congratulations, your extension "my-first-extension" is now active!');

  // 註冊指令
  let disposable = vscode.commands.registerCommand('my-first-extension.helloWorld', () => {
    // 彈出一個提示視窗
    vscode.window.showInformationMessage('Hello World from My First Extension!');
  });

  context.subscriptions.push(disposable);
}

export function deactivate() {}

如何在本地端測試它？

1. 在 VS Code 中按下快捷鍵 F5（或切換到「執行與除錯」面板點擊綠色播放按鈕）。
2. 這時會彈出一個全新的 VS Code 視窗（稱為 Extension Development Host），裡面已經載入了你正在開發中的外掛。
3. 在新視窗中按下 Ctrl + Shift + P 開啟命令面板，輸入 Hello World 並按下 Enter。
4. 你會看到右下角準時彈出提示訊息：“Hello World from My First Extension!” 🎉