在 Visual Studio Code (VS Code) 中，可以通過自定義**代碼片段（Snippets）**快速插入常用代碼模板。以下是詳細設置步驟：
步驟 1：打開代碼片段設置
-
按下快捷鍵?
Ctrl + Shift + P（Windows/Linux）或?Cmd + Shift + P（Mac）打開命令面板。 -
輸入?
Snippets，選擇?Preferences: Configure User Snippets。-
全局片段：選擇?
New Global Snippets File（適用于所有文件類型）。 -
語言特定片段：選擇對應語言（如?
Python、JavaScript?等）。
-
步驟 2：編輯代碼片段文件
選擇語言或創建全局片段后，會打開一個?.json?文件。按照以下格式添加代碼片段：
json
{"Print to console": {"prefix": "clog","body": ["console.log('$1');","$2"],"description": "快速插入 console.log"}
}
-
鍵名（如?
"Print to console"）：代碼片段名稱，可自定義。 -
prefix：觸發代碼片段的快捷詞（如輸入?clog?后按?Tab）。 -
body：插入的代碼內容（每行一個字符串，支持多行）。 -
description：代碼片段的描述（可選）。
步驟 3：高級功能
-
光標占位符：使用?
$1,?$2?指定光標位置，按?Tab?跳轉。json
"body": ["function ${1:name}($2) {"," $3","}" ] -
預設變量：使用?
${變量名}?或內置變量（如?TM_FILENAME?當前文件名）。json
"body": ["// File: ${TM_FILENAME}","console.log('${1:Hello World}');" ] -
多選項占位符：用?
|?分隔選項。json
"body": ["${1|one,two,three|}" ]
步驟 4：保存并測試
-
保存?
.json?文件。 -
在代碼文件中輸入?
prefix?設置的快捷詞（如?clog），按?Tab?或?Enter?插入片段。
示例：Python 的 main 函數片段
json
{"Python Main Function": {"prefix": "main","body": ["if __name__ == '__main__':"," $1"],"description": "插入 Python 主函數入口"}
}
注意事項
-
JSON 語法：確保逗號、引號正確，避免格式錯誤。
-
語言作用域：確認代碼片段文件對應正確的語言（如?
python.json?僅對?.py?文件生效）。 -
沖突處理：若多個片段有相同?
prefix，按?Tab?后會彈出選擇列表。
通過以上步驟，你可以高效創建和管理常用代碼片段，大幅提升編碼速度！🚀
在 Visual Studio Code 中設置好代碼片段后，可以通過以下方式快速使用它們：
基礎使用方式
-
輸入前綴觸發
-
在代碼文件中輸入你定義的?
prefix（快捷詞，例如?clog）。 -
按下?
Tab?或?Enter，代碼片段會自動插入。
-
-
光標跳轉與編輯
-
代碼片段中的?
$1,?$2?表示光標停留的位置。按?Tab?鍵可依次跳轉到下一個占位符，按?Shift + Tab?返回上一個。 -
直接編輯占位符內容，完成后按?
Enter?或繼續編碼。
-
高級用法示例
1.?多選項占位符
如果代碼片段中設置了多選占位符（例如?${1|one,two,three|}），輸入后會彈出選項列表，用方向鍵選擇后按?Enter?確認。
json
{"React Component": {"prefix": "rfc","body": ["import React from 'react';","","export default function ${1|Button,Card,Header|}() {"," return ("," <div>$2</div>"," );","}"]}
}
-
輸入?
rfc?→ 按?Tab?→ 選擇組件名（如?Card）→ 按?Tab?跳轉到?<div>?位置。
2.?變量占位符
使用內置變量（如?TM_FILENAME?當前文件名）或自定義變量：
json
{"File Header": {"prefix": "header","body": ["// File: ${TM_FILENAME}","// Author: ${1:Your Name}","// Created: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"]}
}
-
輸入?
header?→ 按?Tab?→ 自動填充文件名和日期，并等待輸入作者名。
使用技巧
-
手動觸發建議列表
如果代碼片段未自動彈出，按下?Ctrl + Space（Windows/Linux）或?Cmd + Space（Mac）手動喚出建議列表，選擇對應的代碼片段。 -
語言特定限制
-
確保代碼片段文件作用于當前文件類型（例如?
python.json?僅在?.py?文件中生效）。 -
在非目標語言文件中，代碼片段不會觸發。
-
-
全局片段與局部片段
-
全局片段：適用于所有文件類型（需在命令面板中選擇?
New Global Snippets File）。 -
語言特定片段：僅對指定語言生效（如?
javascript.json?只對?.js?文件有效）。
-
常見問題
1. 代碼片段未觸發？
-
檢查項：
-
確認?
prefix?輸入正確（區分大小寫）。 -
確保代碼片段文件與當前文件類型匹配。
-
檢查 JSON 文件是否有語法錯誤（如缺少逗號或引號）。
-
2. 如何快速查找已定義的片段？
-
按下?
Ctrl + Shift + P?→ 輸入?Insert Snippet?→ 選擇對應語言的片段庫查看列表。
實戰演示
假設你為 Python 定義了一個?for?循環片段：
json
{"For Loop": {"prefix": "forloop","body": ["for ${1:i} in range(${2:10}):"," $3"]}
}
-
使用步驟：
-
在?
.py?文件中輸入?forloop。 -
按?
Tab?→ 自動插入代碼，光標停留在?i?處。 -
輸入變量名（如?
index）→ 按?Tab?→ 編輯范圍（如?5）→ 按?Tab?→ 在循環體內編寫代碼。
-
總結
-
核心操作：輸入?
prefix?→?Tab/Enter?→ 編輯占位符 →?Tab?跳轉。 -
高效技巧：
-
用?
$0?指定片段插入后的最終光標位置。 -
結合內置變量（如時間、文件名）實現動態內容。
-
使用多選項占位符減少重復輸入。
-
通過熟練使用代碼片段，你可以將編碼效率提升數倍！ 🚀
操作示例
以.vue文件為例：
需求目標：新建一個.vue文件時，輸入vts，通過代碼片段生成以下代碼：
<script setup lang="ts" name=""></script><template></template><style scoped lang="scss"></style>并且光標定位在 name=""的雙引號中間?
設置操作記錄
?
?
"vue3-ts-template": { //快捷輸入的時候顯示的提示"prefix": "vts", //輸入的前綴，就是輸入這個會有提示"body": [ //這個是一個字符串數組，就是會輸出的內容，如果內容含有雙引號，需要在雙引號前面使用\進行轉義"<script setup lang=\"ts\" name=\"$1\">","$2","</script>","","<template></template>","","<style scoped lang=\"scss\"></style>",]}使用操作記錄?
輸入vts，自動彈出代碼片段提示，按回車確認
?輸入name，按Tab，光位定位到下一個占位，就是第2行開頭位置
)
