💡 前言

在前幾天的文章中，我們學習了透過 Emmet 快速生成 HTML 結構。但在實際開發中，我們更常需要重複撰寫各種程式碼模板——例如：React 元件骨架、Try-Catch 錯誤處理區塊、API 請求模組，或是常用 Console Log 測試語法。

如果每次都要複製貼上或重新敲一遍，不僅效率低下，還容易出現打字錯誤。今天 Day 11 我們要學習 VS Code 內建的超強功能——Custom Snippets（使用者自訂程式碼片段），讓你只需輸入短短幾個字並按下 Tab，就能瞬間生成整段長程式碼！

🎯 本篇重點

1. 什麼是 Snippets 以及其運作原理
2. 如何建立與管理自訂 Snippets 檔
3. Snippet 關鍵欄位拆解 (Prefix, Body, Tab Stops)
4. 實用程式碼片段範例（JavaScript / React / Python）

🛠️ 1. 如何建立自訂 Snippet

建立自訂程式碼片段不需要安裝任何擴充套件：

1. 開啟 VS Code 命令面板（快捷鍵 Ctrl + Shift + P 或 Mac 的 Cmd + Shift + P）。
2. 輸入並選擇 Preferences: Configure User Snippets。
3. 選擇設定範圍：
   • 特定語言（例如：javascript.json、python.json）：僅在對應語言檔案中生效。
   • 全域 Snippet（New Global Snippets file...）：在所有檔案類型中皆可使用。

🔍 2. Snippet JSON 結構解析

建立 JSON 檔後，其核心格式如下範例：

{
  "Print to console": {
    "prefix": "clg",
    "body": [
      "console.log('$1:', $1);",
      "$0"
    ],
    "description": "快速生成帶有變數名稱的 console.log"
  }
}

核心欄位說明：

• prefix：觸發關鍵字。在編輯器中輸入這個字並按 Tab 即可展開程式碼。
• body：展開後的程式碼內容。陣列中的每一行代表輸出的每一列程式碼。
• description：在自動補全選單中顯示的提示說明。

定位點與變數魔法：

• **$1, $2**：Tab 跳轉位置。按下 Tab 鍵時，游標會自動依序跳到 $1 ➜ $2 ➜ $3，方便你快速填寫動態參數。
• $0：最後游標停留的位置。
• ${1:default_value}：帶有預設值的跳轉點。
• $TM_FILENAME_BASE：內建變數，會自動替換為當前檔案的檔名（不含副檔名）。

⚡ 3. 實用 Snippets 範例分享

範例 A：React Functional Component 模板 (React/JavaScript)

輸入 rfc 即可自動以檔名生成標準的 React 元件骨架：

"React Functional Component": {
  "prefix": "rfc",
  "body": [
    "import React from 'react';",
    "",
    "export const $TM_FILENAME_BASE = () => {",
    "  return (",
    "    <div className=\"$1\">",
    "      <h1>$TM_FILENAME_BASE</h1>",
    "    </div>",
    "  );",
    "};",
    "",
    "export default $TM_FILENAME_BASE;"
  ],
  "description": "生成以檔名命名的 React 元件"
}

範例 B：Python Try-Except 錯誤捕捉區塊

輸入 tryex 瞬間生成正規的異常捕捉：

"Python Try Except Block": {
  "prefix": "tryex",
  "body": [
    "try:",
    "    ${1:# 執行程式碼}",
    "except ${2:Exception} as e:",
    "    print(f\"Error occurred: {e}\")",
    "    ${3:raise e}"
  ],
  "description": "生成 Python Try-Except 區塊"
}

💡 小技巧：線上 Snippet 產生器工具

手動寫 JSON 的多行陣列與跳脫字元（如雙引號 \"）比較繁瑣，推薦使用免費線上工具 Snippet Generator。只需把寫好的程式碼貼上去，設定 Prefix，就能自動一鍵轉換成格式正確的 JSON！