如何在 vs code 中創建自定義代碼片段以提高效率？1. 打開 vs code，點擊左下角齒輪圖標，選擇“用戶代碼片段”；2. 選擇目標語言或新建全局片段文件；3. 在 JSon 文件中配置代碼片段，包含名稱、觸發前綴、代碼體和描述；4. 使用 $1、$2 等占位符定義光標跳轉位置；5. 可利用變量、轉換和技巧實現智能代碼生成；6. 保存后在代碼文件中輸入前綴即可觸發片段；7. 通過分享 json 文件或發布擴展共享代碼片段。
VS Code 代碼模板，或者說代碼片段（Snippets），能幫你快速生成重復代碼，節省大量時間。配置起來也不復雜，關鍵是找對地方，寫對格式。
解決方案
VS Code 的代碼片段設置是全局性的，也就是說，你設置一次，所有項目都能用。具體步驟如下：
- 打開 VS Code，點擊左下角的齒輪圖標（設置），然后選擇“用戶代碼片段”。
- VS Code 會提示你選擇語言，比如你想為 JavaScript 設置代碼片段，就選擇“javascript”。如果你想為所有語言設置通用代碼片段，可以選擇“new global snippets file…”。
- 選擇語言后，會打開一個 JSON 文件。這就是你配置代碼片段的地方。
JSON 文件的格式是這樣的：
{ "print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" } }
- “Print to console”：這是代碼片段的名字，隨便起，方便自己識別就行。
- “prefix”：這是觸發代碼片段的關鍵詞，比如你輸入 log，就會出現這個代碼片段的提示。
- “body”：這是代碼片段的內容，是一個字符串數組。每一行都是數組的一個元素。$1、$2 是占位符，按下 Tab 鍵可以依次跳轉到這些位置。
- “description”：這是代碼片段的描述，會在提示中顯示。
舉個例子，你想快速生成一個 React 組件，可以這樣配置：
{ "React Component": { "prefix": "rcomp", "body": [ "import React from 'react';", "", "function ${1:ComponentName}() {", "treturn (", "tt<div>", "ttt$2", "tt</div>", "t);", "}", "", "export default ${1:ComponentName};" ], "description": "Create a new React component" } }
保存 JSON 文件后，在 .js 或 .jsx 文件中輸入 rcomp，就會出現代碼片段提示。選擇它，就能快速生成 React 組件的代碼。
如何在 VS Code 中創建自定義代碼片段以提高效率？
自定義代碼片段的核心在于 body 部分的編寫。想想你經常重復寫的代碼是什么？比如，你經常需要寫 useEffect，就可以創建一個 useEffect 的代碼片段。
{ "React useEffect": { "prefix": "useeffect", "body": [ "import { useEffect } from 'react';", "", "useEffect(() => {", "t${1:// Side effect logic}", "}, [${2:// Dependencies}]);" ], "description": "Create a useEffect hook" } }
另外，占位符 $1、$2 非常有用。你可以用它們來定義代碼生成后的光標位置。$0 表示最終光標停留的位置。
VS Code 代碼片段的進階用法：變量、轉換和條件判斷
代碼片段不僅可以插入靜態文本，還可以使用變量、轉換和條件判斷，讓代碼片段更加智能。
-
變量：VS Code 提供了一些內置變量，比如 $TM_FILENAME（當前文件名）、$TM_FILEPATH（當前文件路徑）等。你可以在代碼片段中使用這些變量。
{ "Log file name": { "prefix": "logfile", "body": [ "console.log('File name: $TM_FILENAME');" ], "description": "Log the current file name" } } -
轉換：可以使用正則表達式對變量進行轉換。例如，將文件名轉換為大寫：${TM_FILENAME/(.*)/${1:/upcase}/}。
-
條件判斷：雖然 VS Code 代碼片段本身不支持直接的條件判斷，但你可以通過一些技巧來實現類似的效果。例如，根據文件類型選擇不同的代碼片段。
如何共享和管理 VS Code 代碼片段？
代碼片段本質上就是一個 JSON 文件，所以共享起來非常簡單。你可以把 JSON 文件分享給你的同事，他們只需要把文件復制到自己的 VS Code 配置目錄即可。
另外，你也可以把代碼片段發布到 VS Code 擴展商店，讓更多人使用你的代碼片段。
管理代碼片段的關鍵在于組織。你可以根據語言、框架、用途等對代碼片段進行分類，方便查找和使用。使用有意義的名字和描述也很重要。
