代碼片段是預先定義的代碼模板，能快速插入常用代碼結構以提升開發效率。在 vs code 中配置代碼片段的方法如下：1. 打開命令面板（ctrl+shift+p 或 cmd+shift+p）；2. 輸入 “snippets” 并選擇 “configure user snippets”；3. 選擇全局或特定語言的片段文件進行編輯。每個代碼片段包含名稱、觸發前綴、主體內容和描述，支持占位符 $1、$2 和帶默認值的 ${1:default text}，還可使用變量如 ${tm_filename} 和 ${tm_current_year}。例如，可創建 react 函數組件模板或版權信息頭部。代碼片段可通過共享 json 文件或插件管理，也可與 emmet 縮寫結合使用，實現 html 結構快速生成，從而顯著提高編碼效率。
代碼片段，簡單來說，就是預先定義好的代碼模板，你在敲代碼的時候，嗖的一下，就能把一大段常用的代碼結構給“召喚”出來，避免重復勞動。VS Code 對代碼片段的支持相當強大，用好了，效率提升不是一點半點。
VS Code 使用代碼片段，核心在于配置和調用。下面我來詳細說說。
配置代碼片段，讓你的效率飛起來
如何創建屬于自己的 VS Code 代碼片段？
創建自定義代碼片段其實很簡單。VS Code 允許你針對不同的語言創建獨立的片段文件。步驟如下：
- 打開 VS Code，按下 Ctrl+Shift+P (windows/linux) 或 Cmd+Shift+P (macos) 打開命令面板。
- 輸入 “snippets”，選擇 “Configure User Snippets”。
- 可以選擇全局的 *.code-snippets 文件，也可以選擇針對特定語言的片段文件，例如 JavaScript.json。
- 在打開的 JSON 文件中，按照 VS Code 要求的格式定義你的代碼片段。
一個典型的代碼片段結構如下：
{ "print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" } }
- “Print to console”: 這是代碼片段的名稱，方便你識別。
- “prefix”: 這是觸發代碼片段的關鍵詞，比如上面例子中的 “log”。 你在編輯器中輸入 “log” 就會出現這個代碼片段的提示。
- “body”: 這是代碼片段的主體部分，是一個字符串數組。每一行代表最終插入代碼的一行。$1、$2 是占位符，光標會依次跳到這些位置。
- “description”: 對代碼片段的描述，在提示列表中顯示。
代碼片段的占位符 $1, $2 和 ${1:default text} 有什么區別？
占位符是代碼片段中非常重要的概念，它們允許你在插入代碼片段后快速定位到需要修改的地方。
- $1, $2, $3… 是簡單的占位符，光標會按照數字順序依次跳到這些位置。
- ${1:default text}: 帶默認值的占位符。插入代碼片段后，光標會定位到這個位置，并且選中 “default text”，你可以直接修改它。數字越大，跳轉順序越靠后。
- ${variable}: 可以使用預定義的變量，比如 ${TM_FILENAME} 代表當前文件名，${TM_CURRENT_YEAR} 代表當前年份。
舉個例子，一個生成 React 函數組件的代碼片段：
{ "React Function Component": { "prefix": "rfc", "body": [ "import React from 'react';", "", "function ${1:ComponentName}() {", " return (", " <div>", " ${2:Content}", " </div>", " );", "}", "", "export default ${1:ComponentName};" ], "description": "Create a React function component" } }
在這個例子中，$1 處會顯示 ComponentName，你可以直接修改組件名。$2 處會顯示 Content，你可以快速添加組件的內容。
如何在代碼片段中使用變量？
VS Code 提供了很多內置的變量，可以在代碼片段中使用，讓代碼片段更加靈活。常用的變量包括：
- TM_FILENAME: 當前文件名
- TM_FILENAME_BASE: 不帶后綴的文件名
- TM_DIRECTORY: 當前文件所在目錄
- TM_FILEPATH: 當前文件的完整路徑
- TM_CURRENT_YEAR: 當前年份
- TM_CURRENT_MONTH: 當前月份 (01-12)
- TM_CURRENT_DATE: 當前日期 (01-31)
- TM_CURRENT_HOUR: 當前小時 (00-23)
- TM_CURRENT_MINUTE: 當前分鐘 (00-59)
- TM_CURRENT_SECOND: 當前秒數 (00-59)
- TM_USERNAME: 當前用戶名
例如，在文件頭部添加版權信息的代碼片段：
{ "Copyright Header": { "prefix": "copyright", "body": [ "/**", " * Copyright (c) ${TM_CURRENT_YEAR} ${TM_USERNAME}", " */", "" ], "description": "Add copyright header" } }
如何共享和管理我的代碼片段？
代碼片段文件本質上是 JSON 文件，你可以很容易地將它們共享給其他人。你可以將 *.code-snippets 文件上傳到 gitHub 倉庫，或者通過郵件發送給你的同事。
另外，VS Code 也有一些插件可以幫助你管理代碼片段，比如 “Snippet Manager” 等。這些插件可以讓你更方便地組織、搜索和編輯代碼片段。
代碼片段和 Emmet 縮寫有什么區別？它們可以一起使用嗎？
代碼片段和 Emmet 縮寫都是提高代碼編寫效率的工具，但它們的使用場景略有不同。
- Emmet 縮寫: 主要用于 HTML 和 css 的快速編寫，通過簡單的縮寫語法生成復雜的 HTML 結構或 CSS 樣式。例如，輸入 ul>li*5>a{Item $} 可以快速生成一個包含 5 個鏈接的無序列表。
- 代碼片段: 更通用，可以用于任何語言，用于生成任何類型的代碼結構，不僅僅是 HTML 和 CSS。
它們可以一起使用。Emmet 縮寫可以嵌入到代碼片段中，反之亦然。例如，你可以創建一個代碼片段，其中包含 Emmet 縮寫，快速生成 HTML 結構。
{ "HTML List": { "prefix": "htmllist", "body": [ "ul>li*5>a{Item $}" ], "description": "Generate an HTML list with Emmet" } }
輸入 htmllist，就會生成
。
代碼片段是 VS Code 中一個非常強大的功能，熟練掌握它可以極大地提高你的編碼效率。花點時間配置好你的代碼片段，你會發現，編程也變得輕松愉快了。
