vs code自定義代碼片段是為了提高開發效率，減少重復代碼輸入。具體步驟如下：1. 打開vs code，點擊左下角齒輪圖標，選擇“用戶代碼片段”，再選擇對應語言或新建全局代碼片段文件；2. 在JSon文件中定義代碼片段，包括名稱、prefix（觸發關鍵詞）、body（代碼內容）和description（描述），例如輸入log后按tab鍵可生成console.log語句。常見問題處理方法包括檢查保存路徑是否正確、確保json格式無誤、避免prefix沖突、確認文件類型關聯正確、重啟vs code或更新版本。此外，支持使用變量如$tm_filename、$tm_current_year等增強代碼片段靈活性，還提供占位符、選擇項、變量轉換、嵌入命令等高級功能，進一步提升開發效率。
VS Code自定義代碼片段，簡單來說就是為了偷懶！減少重復代碼的輸入，提高效率。你想想，每次都要敲一堆一樣的代碼，煩不煩？有了代碼片段，一鍵搞定！
快捷方式：打開VS Code，點擊左下角的齒輪圖標，選擇“用戶代碼片段”，然后選擇你想要創建代碼片段的語言（比如JavaScript、python等），或者直接選擇“新建全局代碼片段文件…”。
創建方法：會打開一個json文件，里面可以定義你的代碼片段。
{ "Print to console": { // 代碼片段的名稱，會顯示在提示列表中 "prefix": "log", // 觸發代碼片段的關鍵詞，輸入log后按下Tab鍵即可觸發 "body": [ // 代碼片段的內容，可以有多行 "console.log('$1');", // $1表示光標的位置，可以有多個，按下Tab鍵可以切換光標位置 "$2" // $2表示下一個光標位置 ], "description": "Log output to console" // 代碼片段的描述，會顯示在提示列表中 }, "Create React Component": { "prefix": "rcc", "body": [ "import React from 'react';", "", "const $1 = () => {", " return (", " <div>", " $2", " </div>", " );", "};", "", "export default $1;" ], "description": "Create a React Component" } }
保存json文件后，就可以在對應的語言文件中使用你的代碼片段了。比如在JavaScript文件中輸入log，然后按下Tab鍵，就會自動生成console.log(”);。
VS Code代碼片段不生效怎么辦？
代碼片段失效，最常見的原因就是文件保存路徑不對或者JSON格式錯誤。
- 檢查保存路徑： 確保你的代碼片段文件保存到了正確的路徑下。全局代碼片段應該保存在VS Code的用戶目錄下，不同操作系統路徑可能不同，但通過“用戶代碼片段”菜單創建的文件會自動保存在正確位置。項目級別的代碼片段應該保存在項目.vscode目錄下。
- JSON格式校驗： JSON格式非常嚴格，任何語法錯誤都會導致代碼片段失效。可以使用VS Code自帶的JSON校驗功能，或者在線JSON校驗工具檢查你的代碼片段文件。常見的錯誤包括：
- 缺少逗號
- 多余的逗號
- 鍵名必須用雙引號
- 字符串中包含特殊字符沒有轉義
- prefix沖突： 檢查是否與其他插件或VS Code內置的代碼片段的prefix沖突。如果沖突，嘗試修改你的prefix。
- 文件類型關聯： 確保你的代碼片段文件關聯了正確的文件類型。例如，JavaScript的代碼片段應該關聯.js文件。
- 重啟VS Code： 有時候，VS Code可能沒有正確加載代碼片段文件，重啟VS Code可以解決問題。
- 檢查VS Code版本： 某些VS Code版本可能存在bug導致代碼片段失效，嘗試更新到最新版本。
如何在VS Code代碼片段中使用變量？
VS Code代碼片段支持使用一些預定義的變量，可以更靈活地生成代碼。
- $TM_FILENAME: 當前文件的文件名。
- $TM_FILENAME_BASE: 當前文件的文件名（不包含后綴）。
- $TM_DIRECTORY: 當前文件所在的目錄。
- $TM_FILEPATH: 當前文件的完整路徑。
- $TM_CURRENT_YEAR: 當前年份。
- $TM_CURRENT_YEAR_SHORT: 當前年份的后兩位。
- $TM_CURRENT_MONTH: 當前月份（兩位數）。
- $TM_CURRENT_MONTH_NAME: 當前月份的完整名稱。
- $TM_CURRENT_MONTH_NAME_SHORT: 當前月份的簡稱。
- $TM_CURRENT_DATE: 當前日期（兩位數）。
- $TM_CURRENT_DAY_NAME: 當前星期幾的完整名稱。
- $TM_CURRENT_DAY_NAME_SHORT: 當前星期幾的簡稱。
- $TM_HOUR: 當前小時（24小時制）。
- $TM_MINUTE: 當前分鐘。
- $TM_SECOND: 當前秒。
- $TM_USERNAME: 當前用戶名。
例如，你可以在代碼片段中添加版權信息：
{ "Copyright": { "prefix": "copyright", "body": [ "/**", " * Copyright (c) $TM_CURRENT_YEAR, $TM_USERNAME", " */", "" ], "description": "Add copyright information" } }
VS Code代碼片段支持哪些高級用法？
除了基本的文本替換，VS Code代碼片段還支持一些高級用法，讓你的代碼片段更加強大。
- 占位符(Placeholders)： 使用$1、$2、$3等定義占位符，按下Tab鍵可以在這些占位符之間切換。還可以為占位符設置默認值，例如${1:default value}。
- 選擇項(Choice)： 使用${1|option1,option2,option3|}定義選擇項，按下Tab鍵后會彈出一個下拉列表，可以選擇不同的選項。
- 變量轉換(Variable Transformation)： 可以使用變量轉換對變量進行格式化。例如，${TM_FILENAME/(.*).(.*)/${1}/}可以提取文件名（不包含后綴）。 ${TM_FILENAME/(.*).(.*)/${2}/}可以提取文件后綴。
- 嵌入命令(Embedded Commands)： 可以使用$(command)嵌入VS Code的命令。例如，$(uuid)可以生成一個UUID。
- 多行字符串： body字段是一個字符串數組，每一行都是代碼片段的一部分。可以使用多行字符串來定義復雜的代碼片段。
- 條件判斷： 通過一些插件，可以實現更復雜的條件判斷，比如根據當前文件類型選擇不同的代碼片段。
利用這些高級用法，你可以創建非常靈活和強大的代碼片段，大大提高你的開發效率。
