在 vscode 中添加自定義用戶代碼片段可提升編碼效率。1. 打開“用戶代碼片段”設置界面，通過快捷鍵或菜單欄選擇對應語言；2. 編寫 JSon 格式的代碼片段，包含 prefix、body 和 description；3. 不同語言可分別設置，也可創建全局或工作區片段；4. 建議模板簡潔、prefix 有意義、body 用數組形式，并參考官方文檔學習高級語法。
在 vscode 中添加自定義用戶代碼片段，是提升編碼效率的一個非常實用的小技巧。特別是當你頻繁寫某些結構化代碼塊時，只需輸入幾個關鍵詞就能自動展開完整模板，節省時間還減少重復勞動。
下面我來一步步說說怎么設置和使用這些代碼片段。
1. 打開“用戶代碼片段”設置界面
VSCode 提供了方便的入口來編輯代碼片段。你可以通過以下方式打開：
- 快捷鍵：按下 Ctrl + Shift + P（windows/linux）或 Cmd + Shift + P（Mac），輸入 Preferences: Configure User Snippets。
- 菜單欄：點擊左下角齒輪圖標 → 選擇“Snippets” → 然后選你當前語言對應的片段文件（比如 JavaScript、html、python 等）。
如果你是第一次配置某個語言的代碼片段，系統會自動生成一個 .json 文件，比如 javascript.json，里面已經有一些注釋說明。
2. 編寫自己的代碼片段格式
VSCode 的代碼片段格式是 JSON 格式，每個片段由一個名字開始，包含前綴、描述和內容三部分。
舉個例子，如果你想為 HTML 中常用的結構添加一個快捷代碼塊，可以這樣寫：
"html base": { "prefix": "htmlbase", "body": [ "<!DOCTYPE html>", "<html lang="en">", "<head>", " <meta charset="UTF-8">", " <title>Document</title>", "</head>", "<body>", "", "</body>", "</html>" ], "description": "基礎 HTML 頁面結構" }
這里有幾個關鍵點需要注意：
- prefix 是你在編輯器中輸入的關鍵字，比如輸入 htmlbase 后按回車就會觸發這個模板。
- body 是實際生成的內容，每行用引號包裹，換行自動處理。
- 如果你想在插入時留出光標位置，可以用 $1、$2 這樣的占位符，比如
$2
。
3. 不同語言可以分別設置
VSCode 支持為每種語言單獨配置代碼片段。例如：
只需要在設置界面選擇對應的語言即可，VSCode 會自動跳轉到該語言的 snippets 文件。
你也可以創建全局片段或者特定項目專用片段（工作區片段），不過大多數時候用用戶級別的就足夠了。
4. 小技巧與注意事項
- 模板別太復雜，不然反而影響效率。
- 給每個片段起個有意義的 prefix，比如 func 表示函數、loop 表示循環結構。
- 多行內容建議用數組形式寫，清晰又不容易出錯。
- 可以參考 VSCode 官方文檔了解更高級的語法，比如變量、條件判斷等。
基本上就這些操作，設置一次之后就可以長期受益。像函數頭、組件結構、日志輸出這些高頻內容，都可以靠代碼片段快速生成。
剛開始可能覺得麻煩，但一旦養成習慣，你會發現它比手動敲快很多，而且還能減少低級錯誤。不復雜但容易忽略，值得試試。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
