VSCode User Snippets 入門：快速提升編碼效率的必備技巧

更新日期： 2023 年 9 月 19 日

你是否曾經為了寫一段常用的程式碼碎片，而覺得重複和繁瑣？

或者在寫特定的架構時，希望能有一個快速鍵可以自動展開所有的程式碼？

Visual Studio Code (簡稱 VSCode) 作為近年來最受歡迎的程式碼編輯器之一。

不僅因為它具有強大的功能和廣泛的插件庫，更因為它不斷引入的便利特性，讓開發者的工作更為輕鬆。

其中，一個特別受到喜愛的功能就是「User Snippets」。

藉由此功能，你可以快速地重複使用自己常寫的程式碼，大大提升編碼的效率和準確性。

在這篇文章中，我們將從零開始探討 VSCode 的 User Snippets 功能，從基礎的設定到進階的技巧，幫助你完全掌握這一強大的工具。

如何設置 User Snippets？

設定自己的 VSCode User Snippets 實際上是非常直觀的。

只需幾個簡單的步驟，你就可以開始自定義你的程式碼範本。

接下來，我們將一步一步指引你如何操作：

1. 開啟 VSCode
   首先，確保你已經安裝了 Visual Studio Code，並開啟它。

2. 進入 Snippets 設定
   在左側的活動列中，點擊齒輪圖標以開啟設定(Settings)。在搜索框中，輸入「> user snippets」。接著，點選「程式碼片段: 設定使用者程式碼片段」或「Snippets: Configure User Snippets」。

3. 選擇語言或新建一個 Snippet
   你可以選擇一種已經支援的程式語言，或點擊右上角的新建按鈕來創建一個全新的 Snippet 檔案。

4. 編寫你的 Snippet
   在打開的 JSON 檔案中，你將看到一個範例 Snippet。格式如下：

"程式碼片段名稱": {
    "prefix": "觸發關鍵字",
    "body": [
        "你的代碼將會在此顯示",
        "另一行程式碼"
    ],
    "description": "描述你的片段"
}

• Snippet Name：這是 Snippet 的名稱，主要是供你參考。
• prefix：觸發詞，當你在編輯器中輸入這個詞並按下 Tab 鍵時，它會被替換成 body 中的內容。
• body：這是實際的程式碼片段，你可以新增多行程式碼。
• description：描述，幫助你記住這個 Snippet 的用途。

5. 保存並測試
   完成上述步驟後，保存你的 JSON 檔案。接著，返回 VSCode 的編輯器，並在相應的語言檔案中輸入你設定的觸發詞。按下 Tab 鍵，觀察你的 Snippet 是否被正確插入。

這就是如何在 VSCode 中設置自己的 User Snippets。一旦你熟悉了這個過程，你可以隨時創建更多的程式碼片段，以提高編碼效率。

建立你的第一個 Snippet

對於初學者來說，建立自己的第一個 Snippet 可能會有些不知所措。

但不用擔心，我將帶領你完成整個流程。

讓我們透過一個簡單的例子，來了解整個建立過程。

1. 選擇目標語言
   假設我們要建立的是一個 JavaScript 的 Snippet，首先，按照上述方法，打開「程式碼片段: 設定使用者程式碼片段」並選擇 JavaScript。

2. 定義 Snippet
   在打開的 JSON 文件中，開始編寫以下 Snippet：

"Print Function": {
    "prefix": "printFunc",
    "body": [
        "function printMessage(message) {",
        "    console.log(message);",
        "}"
    ],
    "description": "Simple function to print a message to the console"
}

這是一個簡單的 Snippet，旨在快速插入一個稱為 printMessage 的函式，它接受一個名為 message 的參數，並在控制台上顯示它。

3. 保存
   確保保存你的修改。

4. 測試 Snippet
   開啟或創建一個 .js 檔案，然後在編輯器中輸入 printFunc，你會看到一個建議的下拉列表，其中包含你剛剛建立的 Snippet。

   選擇它並按下 Tab 鍵。你會看到上述的 printMessage 函式完整地插入了文件中。

恭喜！你已經成功創建了你的第一個 VSCode User Snippet！

"他說： \"你好！\""

進階技巧

當你已經熟悉了基礎的 Snippet 建立過程後，接下來我們可以探索一些更進階的技巧，以充分發揮 VSCode User Snippets 的威力。

使用佔位符

VSCode 的 Snippets 功能允許你快速插入程式碼模板，而不必每次都手動輸入重複的程式碼。在這些模板中，可以定義一些「佔位符」，這就是 ${...} 的部分。

"Function with Parameters": {
    "prefix": "funcParams",
    "body": [
        "function ${1:funcName}(${2:params}) {",
        "\t$0",
        "}"
    ],
    "description": "Function with dynamic name and parameters"
}

${1:funcName} 和 ${2:params} 是兩個不同的佔位符。

當你插入此 Snippet（程式碼模板）時，VSCode 會先將游標放在 ${1:funcName} 的位置，這時你會看到「funcName」這個預設文字，你可以選擇保留它或者輸入自己想要的函式名稱。

輸入完成後，當你按下 Tab 鍵，游標會移動到下一個佔位符 ${2:params} 的位置。

同樣，「params」這個預設文字會出現，你可以保留或更換它，這次輸入的應該是你想要的函式參數。

簡單來說，這些佔位符讓你能在插入 Snippet 後，快速填充或修改某些部分的程式碼，使你的編碼過程更為迅速和流暢。

2. 使用選擇
   你可以提供多個選項供自己選擇，如：

"Console Log Types": {
    "prefix": "logType",
    "body": "console.${1|log,info,warn,error|}('$2');",
    "description": "Choose a type of console log"
}

插入這個 Snippet 之後，你將可以在 log、info、warn 和 error 之間選擇一個適合的方法。

"example": {
    "prefix": "ex",
    "body": ["${1|選項 A,選項 B|}", "${2|選項 C,選項 D|}"],
    "description": "An example snippet"
}

嵌套的 Snippets

你可以在一個 Snippet 中嵌套另一個 Snippet，這使得組織和重用 Snippets 變得更加容易。

多行 Snippets

當你希望 Snippet 包含多行程式碼或文本時，你可以使用 JSON 格式中的陣列來代表每一行。每個陣列中的字串代表 Snippet 的一行。

舉例來說，假如你想要創建以下 JavaScript 函數的 Snippet：

function myFunction() {
    // Your code here
}

在 VSCode 的 Snippet JSON 文件中，你會這樣寫：

"My Function Template": {
    "prefix": "myfunc",
    "body": [
        "function myFunction() {",
        "    // Your code here",
        "}"
    ],
    "description": "Template for a basic function"
}

跨語言 Snippets

當你希望在多種語言中使用同一個 Snippet 時，你可以選擇在任何一種語言的 .json 檔案中加入這個 Snippet，並使用 scope 屬性來指定該 Snippet 在哪些語言中是可用的。

舉例來說，如果你想要一個 Snippet 在 JavaScript 和 TypeScript 中都可以使用，你可以選擇在 javascript.json 檔案中加入該 Snippet，並設定其 scope 如下：

"Your Snippet Name": {
    "prefix": "yoursnippet",
    "body": [
            "Your snippet code here"
    ],
    "description": "Your snippet description",
    "scope": "javascript,typescript",
}

分享與導入其他人的 Snippets

在許多時候，當你發現了一個特別有用的 Snippet，或者你自己創建了一個非常實用的 Snippet，你可能會想要分享給其他人，或從他們那裡導入。

幸運的是，VSCode 提供了這樣的功能，讓我們來看看如何操作：

如何分享你的 Snippets

1. 找到 Snippet 文件
   打開 VSCode，進入設置，然後找到你的 User Snippets。這些 Snippets 通常保存在 JSON 文件中。文件的位置取決於你的作業系統。
2. 將文件分享到 GitHub/Gist
   一個常見的做法是將你的 Snippets 文件分享到 GitHub。如果你只是想分享單一的 Snippet，使用 Gist 是一個很好的選擇。只需複製 Snippet 的 JSON 內容並創建一個新的 Gist。
3. 分享連結
   一旦你已經上傳了 Snippet，只需分享 Gist 的 URL 或 GitHub 存儲庫的連結給你的同事或朋友。

如何導入其他人的 Snippets

1. 從 GitHub/Gist 下載 Snippets
   首先，從提供的連結中下載 Snippet 文件。如果是 Gist，你可以直接下載；如果是 GitHub 存儲庫，可能需要下載整個 repo 或特定的 Snippet 文件。
2. 導入到 VSCode
   打開 VSCode，進入設置，然後尋找 User Snippets。選擇合適的語言（如果該 Snippet 是特定於某種語言的）或選擇全局 Snippets 文件。然後將剛才下載的 Snippet 內容複製並粘貼到此文件中。
3. 儲存並使用
   儲存文件後，新導入的 Snippets 應該立即可用。只需輸入其指定的前綴，然後從彈出的建議列表中選擇即可。

分享和導入 Snippets 可以大大加快團隊的工作流程，尤其是當團隊成員都使用相同的開發環境時。

此外，這也是一個極佳的方式，讓新加入的成員快速熟悉，和使用團隊共同遵循的代碼標準或模式。

常見問題與解答

在使用 VSCode 的 User Snippets 功能時，許多開發者可能會遇到一些常見問題或疑惑。以下是一些常見的問題以及其解答：

結語

VSCode 的 User Snippets 功能不僅是編碼的小助手，更是讓我們日常開發工作變得更加高效的工具。

透過自訂 Snippets，我們可以縮短寫重複代碼的時間，讓精力更加集中於解決實際的問題上。

希望這篇文章能幫助你更深入地了解這個功能，並將它應用到日常開發中，從而開啟一段更加流暢和高效的編碼之旅。