vs code 添加代碼片段的方法有兩種：1. 用戶自定義代碼片段，通過命令面板選擇“configure user snippets”，選擇對應語言并編輯.json文件，定義prefix、body、description等字段，保存后即可在代碼中通過快捷鍵觸發；2. 安裝擴展，通過擴展市場搜索并安裝相關代碼片段擴展，如“es7 react/redux/graphql/react-native snippets”，安裝后按指定前綴加tab鍵使用。
VS Code 添加代碼片段，簡單來說，就是讓你常用的一段代碼，比如一個函數模板、一個循環結構，可以像快捷鍵一樣快速生成。這能大幅提升開發效率，避免重復勞動。
解決方案
VS Code 提供了強大的代碼片段功能，可以通過用戶自定義或者安裝擴展的方式添加代碼片段。下面詳細介紹兩種方法：
1. 用戶自定義代碼片段
這是最靈活的方式，你可以根據自己的需求定制任何代碼片段。
-
打開用戶代碼片段配置: 在 VS Code 中，按下 Ctrl+Shift+P (windows/linux) 或 Cmd+Shift+P (Mac)，打開命令面板，輸入 “snippet”，選擇 “Configure User Snippets”。
-
選擇語言: 選擇你要配置代碼片段的語言，比如 “JavaScript”、”python“、”html” 等。 VS Code 會打開一個 .json 文件，如果沒有，它會創建一個。
-
編寫代碼片段: 在 .json 文件中，你可以定義你的代碼片段。 一個代碼片段的基本結構如下：
{ "Snippet Name": { "prefix": "shortcut", "body": [ "// Your code snippet here", "// Use $1, $2, ... for tab stops", "// Use ${1:default text} for default text in tab stops" ], "description": "A description of the snippet" } }
* `Snippet Name`: 代碼片段的名稱，隨意起，方便自己識別就行。 * `prefix`: 觸發代碼片段的快捷方式，比如輸入 "shortcut" 然后按下 `Tab` 鍵，就會生成代碼片段。 * `body`: 代碼片段的主體，是一個字符串數組，每一項代表一行代碼。 可以使用 `$1`, `$2` 等作為占位符，按下 `Tab` 鍵可以在這些占位符之間跳轉。 `${1:default text}` 表示占位符 1，并帶有默認文本 "default text"。 * `description`: 代碼片段的描述，在 VS Code 的代碼提示中會顯示。
- 示例: 假設我們要創建一個 JavaScript 的 console.log 代碼片段，可以這樣配置：
{ "Console Log": { "prefix": "clog", "body": [ "console.log('$1', $2);", "$3" ], "description": "快速生成 console.log 語句" } }
保存這個 `.json` 文件，然后在 JavaScript 文件中輸入 "clog"，按下 `Tab` 鍵，就會生成 `console.log('', );`，光標會停留在第一個引號內，可以輸入要打印的內容，然后按下 `Tab` 鍵，光標會跳到第二個參數的位置，繼續輸入，最后按下 `Tab` 鍵，光標會跳到下一行。
- 轉義字符: 如果你的代碼片段中包含特殊字符，比如 或 “，需要進行轉義。 轉義為 ， ” 轉義為 “。
2. 安裝代碼片段擴展
VS Code 市場上有大量的代碼片段擴展，涵蓋各種語言和框架。
-
搜索擴展: 在 VS Code 中，點擊左側的擴展按鈕 (或按下 Ctrl+Shift+X / Cmd+Shift+X)，搜索 “snippets” 或具體的語言/框架名稱，比如 “javascript snippets”、”react snippets”。
-
安裝擴展: 選擇一個評分高、下載量大的擴展，點擊 “Install” 安裝。
-
使用擴展: 安裝完成后，按照擴展的說明文檔使用代碼片段。 通常，擴展會在你輸入特定的前綴時，自動彈出代碼提示。
例如，安裝了 “ES7 React/Redux/GraphQL/React-Native snippets” 擴展后，輸入 “rfc” 然后按下 Tab 鍵，就可以快速生成 React 函數組件的代碼。
如何管理和組織 VS Code 代碼片段，使其更易于查找和使用？
管理代碼片段的關鍵在于清晰的命名、合理的分類和有效的搜索。
-
清晰的命名: 給每個代碼片段起一個有意義的名字，方便你在代碼提示中快速找到它。 名字應該簡潔明了，能夠準確描述代碼片段的功能。
-
合理的分類: 如果你有很多代碼片段，可以按照語言、框架、功能等進行分類。 例如，可以創建不同的 .json 文件，分別存放 JavaScript、python、React 等代碼片段。
-
使用描述: 在代碼片段的 description 字段中，添加詳細的描述，說明代碼片段的用途、用法和注意事項。 這有助于你在代碼提示中更好地理解代碼片段的功能。
-
善用搜索: VS Code 的代碼提示功能支持模糊搜索，你可以輸入代碼片段名稱或描述中的關鍵詞來查找代碼片段。
-
代碼片段管理器擴展: 有一些擴展可以幫助你更好地管理代碼片段，比如 “Snippet Manager”。 這些擴展通常提供更強大的搜索、編輯和組織功能。
-
版本控制: 將你的代碼片段文件納入版本控制系統 (比如 git)，可以方便地備份、同步和分享你的代碼片段。
代碼片段中的占位符 $1, $2 和 ${1:default text} 有什么區別和用法？
占位符是代碼片段中非常重要的組成部分，它們允許你在生成代碼片段后，快速地編輯和修改代碼。
-
$1, $2, $3, …: 這些是簡單的占位符，表示按下 Tab 鍵后光標跳轉的位置。 $1 表示第一個占位符，$2 表示第二個占位符，以此類推。 它們按照數字順序排列，按下 Tab 鍵會依次跳轉到這些占位符。
-
${1:default text}, ${2:another text}, …: 這些是帶有默認文本的占位符。 1 和 2 仍然表示占位符的順序，default text 和 another text 是默認文本。 當代碼片段生成時，這些占位符會被默認文本填充，你可以直接修改它們。 如果沒有修改，按下 Tab 鍵會直接跳到下一個占位符。
-
${1}, ${2}, …: 雖然看起來和 $1, $2 類似，但它們的作用略有不同。 ${1} 允許你使用更復雜的表達式，比如變量、函數調用等。 在某些情況下，${1} 可以更好地處理特殊字符和轉義。
-
$0: 這是一個特殊的占位符，表示代碼片段生成后，光標的最終位置。 如果沒有 $0，光標會停留在代碼片段的最后一行。
示例:
{ "Function Template": { "prefix": "func", "body": [ "function ${1:functionName}(${2:parameters}) {", " ${3:// Your code here}", " return ${4:returnValue};", "}$0" ], "description": "快速生成函數模板" } }
在這個例子中：
- 輸入 “func” 然后按下 Tab 鍵，會生成函數模板。
- 光標會停留在 ${1:functionName} 的位置，可以輸入函數名。 默認文本是 “functionName”。
- 按下 Tab 鍵，光標會跳到 ${2:parameters} 的位置，可以輸入函數參數。 默認文本是 “parameters”。
- 按下 Tab 鍵，光標會跳到 ${3:// Your code here} 的位置，可以輸入函數體代碼。
- 按下 Tab 鍵，光標會跳到 ${4:returnValue} 的位置，可以輸入返回值。 默認文本是 “returnValue”。
- 按下 Tab 鍵，光標會跳到 $0 的位置，也就是函數定義的最后一行。
如何在 VS Code 代碼片段中使用變量和表達式？
VS Code 代碼片段支持使用一些預定義的變量和簡單的表達式，可以讓你更靈活地生成代碼。
預定義變量:
- $TM_FILENAME: 當前文件的文件名。
- $TM_FILENAME_BASE: 當前文件的文件名（不包含擴展名）。
- $TM_DIRECTORY: 當前文件的目錄。
- $TM_FILEPATH: 當前文件的完整路徑。
- $TM_CURRENT_LINE: 當前行的內容。
- $TM_CURRENT_WORD: 光標下的單詞。
- $TM_SELECTED_TEXT: 選中的文本。
- $CURRENT_YEAR: 當前年份。
- $CURRENT_YEAR_SHORT: 當前年份的后兩位。
- $CURRENT_MONTH: 當前月份（兩位數）。
- $CURRENT_MONTH_NAME: 當前月份的英文名稱。
- $CURRENT_MONTH_NAME_SHORT: 當前月份的英文簡稱。
- $CURRENT_DATE: 當前日期（兩位數）。
- $CURRENT_DAY_NAME: 當前星期的英文名稱。
- $CURRENT_DAY_NAME_SHORT: 當前星期的英文簡稱。
- $CURRENT_HOUR: 當前小時（24 小時制）。
- $CURRENT_MINUTE: 當前分鐘。
- $CURRENT_SECOND: 當前秒。
- $RANDOM: 隨機的 6 位十六進制數。
- $RANDOM_HEX: 隨機的 6 位十六進制數。
- $UUID: 一個 UUID。
- $BLOCK_COMMENT_START: 當前語言的塊注釋開始標記。
- $BLOCK_COMMENT_END: 當前語言的塊注釋結束標記。
- $LINE_COMMENT: 當前語言的行注釋標記。
表達式:
VS Code 代碼片段支持使用 TM_SELECTED_TEXT 變量和正則表達式來進行簡單的文本替換。 語法是 ${TM_SELECTED_TEXT/regexp/format/}。
- TM_SELECTED_TEXT: 選中的文本。
- regexp: 一個正則表達式。
- format: 替換格式。
示例:
{ "Surround with console.log": { "prefix": "sclog", "body": [ "console.log('$TM_FILENAME_BASE: ${TM_SELECTED_TEXT}');$0" ], "description": "用 console.log 包裹選中的文本，并顯示文件名" }, "Convert to Upper Case": { "prefix": "upper", "body": [ "${TM_SELECTED_TEXT/([a-z]+)/U$1/g}" ], "description": "將選中的文本轉換為大寫" } }
- Surround with console.log 代碼片段會將選中的文本用 console.log 包裹，并顯示當前文件的文件名（不包含擴展名）。
- Convert to Upper Case 代碼片段會將選中的文本轉換為大寫。 ([a-z]+) 是一個正則表達式，匹配所有小寫字母。 U$1 表示將第一個捕獲組（也就是匹配到的小寫字母）轉換為大寫。 g 表示全局匹配，替換所有匹配到的文本。
這些變量和表達式可以讓你創建更智能、更靈活的代碼片段，減少手動輸入，提高開發效率。
如何在不同項目中使用相同的 VS Code 代碼片段？
讓代碼片段在不同項目中可用，主要有以下幾種方法：
-
全局用戶代碼片段: 這是最簡單的方法。 你只需要在用戶代碼片段配置文件中定義代碼片段，它們就會在所有項目中生效。 用戶代碼片段配置文件位于：
- Windows: %APPDATA%CodeUsersnippets
- macos: ~/Library/Application Support/Code/User/snippets
- Linux: ~/.config/Code/User/snippets
-
工作區代碼片段: 如果你只想在特定的項目中使用某些代碼片段，可以創建工作區代碼片段。 在 VS Code 中，打開項目文件夾，然后選擇 “File” -> “Preferences” -> “Configure Workspace Snippets”。 VS Code 會在項目文件夾中創建一個 .vscode 文件夾，并在其中創建一個 .code-snippets 文件。 在這個文件中定義的代碼片段只會在當前項目中生效。
-
擴展: 你可以將你的代碼片段打包成一個 VS Code 擴展，然后發布到 VS Code 市場上。 這樣，其他人就可以安裝你的擴展，并在他們的項目中使用你的代碼片段。 這種方法比較復雜，但可以方便地分享你的代碼片段。
-
共享代碼片段文件: 你可以將你的代碼片段文件 (.json 或 .code-snippets) 放到一個共享的存儲空間 (比如 Git 倉庫、云盤等)，然后在不同的項目中鏈接或復制這些文件。 這種方法比較靈活，但需要手動維護文件的同步。
選擇哪種方法取決于你的需求：
- 如果你想讓代碼片段在所有項目中都可用，使用全局用戶代碼片段。
- 如果你只想在特定的項目中使用代碼片段，使用工作區代碼片段。
- 如果你想分享你的代碼片段給其他人，創建擴展或共享代碼片段文件。
無論選擇哪種方法，都需要注意代碼片段文件的版本控制和同步，確保在不同的項目中使用的代碼片段是最新的。
