如何在 Visual Studio Code 中建立快捷程式碼片段?
1. 引言
身為開發者,我們在編寫程式碼時常常重複相同的模式。雖然每次重複看似微不足道,但日積月累會降低我們的工作效率。幸運的是, Visual Studio Code 提供了使用者自訂程式碼片段功能,讓我們可以將簡短的觸發語句擴展為完整的程式碼範本。這樣一來,我們就能減少重複輸入,提高程式碼一致性,並將更多精力集中在解決問題上。
在本教學中,我們將解釋 Visual Studio Code 中的程式碼片段是如何運作的,並示範如何有效地建立和使用它們。
2. VS Code 中的程式碼片段
程式碼片段是一種可重複使用的程式碼模板,當輸入特定關鍵字時會自動展開。 VS Code 將程式碼片段儲存在 JSON 檔案中,每個定義控制編輯器如何展開模板。
通常,程式碼片段包含三個主要欄位:前綴(用作觸發關鍵字)、主體(插入程式碼)和描述(在 IntelliSense 中提供簡短說明)。
輸入前綴並按Tab (或從建議中選擇)後,VS Code 會將程式碼片段插入編輯器中。
VS Code 還提供了內建程式碼片段和基於擴充功能的程式碼片段包,因此我們應該在建立新程式碼片段之前檢查現有選項。
3. 建立一個簡單的程式碼片段
要開始編寫程式碼片段,我們首先需要打開程式碼片段配置介面。我們可以透過指令面板開啟它(Windows 系統下為Ctrl + Shift + P ,Mac 系統下為Cmd + Shift + P )。
接下來,我們搜尋Configure Snippets ,然後選擇所需的作用域。有多種作用域可供選擇,包括適用於所有檔案類型的全域程式碼片段和僅適用於特定語言的語言特定程式碼片段。
完成選擇後,VS Code 允許我們為文件選擇一個名稱,然後打開一個 JSON 文件,我們可以在其中定義程式碼片段。
3.1 插入標題註釋
讓我們建立一個程式碼片段,用於插入節標題註釋:
"Section Header": {
"prefix": "sechead",
"body": [
"// ============================",
"// ${1:Section Title}",
"// ============================",
"// ${2:Author}",
"// ============================"
],
"description": "Insert a section header comment"
}
這裡, ${1:Section Title}和${2:Author}定義佔位符並控制遊標導航順序。
儲存檔案後,我們可以立即嘗試:在新檔案中輸入前綴sechead ,或是在 Windows 系統中按Ctrl + Space ,或在 Mac 系統中按Cmd + Space開啟程式碼片段下拉式選單。選取程式碼片段後,按Tab或Enter即可插入節標題。
// ============================
// Section Title
// ============================
// Author
// ============================
新增程式碼片段後,遊標會立即跳到第一個位置。輸入章節標題後,我們可以按 Tab 鍵將其移至下一個位置,即作者位置。
3.2. 程式碼片段捷徑
程式碼片段對於頻繁輸入的語句尤其有用。例如,Java 開發人員經常會編寫System.out.println()來進行除錯。
我們可以建立如下快捷方式:
"System.out.println": {
"prefix": "sysout",
"body": [
"System.out.println(${1:value});"
],
"description": "Print a value to the console"
}
儲存後,我們可以輸入sysout並展開它。 VS Code 會插入:
System.out.println(value);
遊標會出現在括號內,方便我們快速替換佔位符。
4. 高階程式碼片段控件
現在我們已經建立了基本程式碼片段,接下來我們可以探索 VS Code 中更多進階功能。
4.1. 特定語言片段
根據程式碼片段的定義位置,每個程式碼片段的作用域可以限定為一種、幾種或所有(「全域」)語言。
單語言使用者自訂程式碼片段定義在特定語言的程式碼片段檔案(例如 java.json)中,我們可以透過「程式碼片段:使用語言識別碼設定碼片段」來存取該檔案。
例如,我們可以為sysout程式碼片段新增一個作用域:
"scope": "java",
透過新增這一行,我們可以確保只有在 Java 中編輯檔案時,該程式碼片段才可用。
多語言和全域使用者自訂程式碼片段都定義在「全域」程式碼片段檔案(JSON 文件,檔案副檔名為.code-snippets )中。例如,我們可以為先前定義的scope添加另一種語言:
"scope": "java,kotlin"
現在,只有在處理 Java 或 Kotlin 檔案時才會出現sysout 。
4.2. 選擇與變數
佔位符可以包含預先定義的選項。例如,我們可以使用豎線字元(|)內的逗號分隔清單來定義它們,例如${1|one,two,three|} 。當程式碼片段展開時,編輯器會提示我們選擇一個值,這樣我們就可以快速選擇,而無需手動輸入。
此外,我們可以使用$name或${name:default}來插入變數。如果變數存在,編輯器會插入其值;否則,使用預設值或空字串。但是,如果變數未知,編輯器會插入其名稱並將其轉換為可編輯的佔位符。
讓我們重寫系統輸出程式碼片段,使其使用選項和變數:
"Java Log with Choice and Variable": {
"scope": "java,kotlin",
"prefix": "sysout",
"body": [
"System.out.println(\"[${1|INFO,DEBUG,ERROR|}] ${TM_FILENAME_BASE}: ${2:message}\");"
],
"description": "Log statement with level choice and filename variable"
}
首先, ${1|INFO,DEBUG,ERROR|}允許我們在程式碼片段展開時選擇一個值,我們可以循環瀏覽可用選項(INFO → DEBUG → ERROR)。
接下來, ${TM_FILENAME_BASE}會自動插入目前檔案名稱(不含副檔名),這樣我們就不需要手動輸入了。 VS Code 提供了許多預先定義的變量,我們可以在程式碼片段中使用它們。
最後, ${2:message}會插入一個預設值(message),同時仍然允許我們立即覆寫它。
4.3.佔位符轉換(基於正規表示式的運算)
除了基本的佔位符之外, VS Code 還支援佔位符轉換,允許我們使用正規表示式修改輸入。因此,我們可以動態格式化文本,而無需手動重寫。
語法結構如下:
${variable/regex/format/options}
我們來看一個實際例子。假設我們要產生一個 Java getter 方法,其中欄位名稱會自動首字母大寫:
"Java Getter": {
"scope": "java",
"prefix": "getter",
"body": [
"public ${1:String} get${2/(.*)/${1:/capitalize}/}() {",
" return ${2:fieldName};",
"}"
],
"description": "Generate getter with capitalized field name"
}
這裡, ${2:fieldName}定義了輸入佔位符。然後, ${2/(.*)/${1:/capitalize}/}將該輸入轉換為首字母大寫。
例如,如果我們輸入userName ,程式碼片段將展開為:
public String getUserName() {
return userName;
}
因此,我們可以重複使用使用者輸入並自動調整其格式。此功能在產生方法名稱、常數或格式化識別碼時尤其有用。
4.4. 為程式碼片段指派鍵盤快速鍵
除了前綴之外,我們還可以使用鍵盤快捷鍵觸發程式碼片段。讓我們使用命令面板並輸入「開啟鍵盤快捷鍵 (JSON)」來開啟使用者的快捷鍵綁定檔案。
在這裡,我們可以定義並可能覆蓋現有的預設快捷鍵。就我們的情況而言,我們使用 Windows 上的快捷鍵Ctrl + Alt + P 或 Mac 上的快捷鍵Cmd + Option + P :
{
"key": "ctrl+alt+p",
"command": "editor.action.insertSnippet",
"args": {
"name": "Java Log with Choice and Variable"
},
"when": "editorTextFocus && editorLangId == 'java'"
}
文件儲存後,我們就可以快速插入自訂程式碼片段了:
透過指派鍵盤快捷鍵,我們可以立即插入自訂程式碼片段,從而提高速度和工作效率。
5. 結論
在本文中,我們探討如何在 Visual Studio Code 中建立和自訂程式碼片段,以減少重複編碼並提高開發效率。
我們首先打開程式碼片段配置並選擇了合適的範圍。
接下來,我們使用前綴、正文和描述來定義程式碼片段。
然後,我們透過佔位符、製表符、選項、變數和基於正規表示式的轉換來增強它們。
透過投入少量時間來創建程式碼片段,我們可以顯著提高開發速度,並在各個專案中保持程式碼的一致性。