Visual Studio Code 中的程式碼片段
程式碼片段是模板，用於方便輸入重複的程式碼模式，例如迴圈或條件語句。
在 Visual Studio Code 中，程式碼片段會與 IntelliSense（⌃Space (Windows、Linux Ctrl+Space)）中的其他建議一起顯示，也可以在專門的程式碼片段選擇器（命令面板中的“插入程式碼片段”）中找到。還支援製表符補全：透過 "editor.tabCompletion": "on" 啟用它，鍵入 **程式碼片段字首**（觸發文字），然後按 Tab 插入程式碼片段。
程式碼片段的語法遵循 TextMate 程式碼片段語法，但“插值 shell 程式碼”和 `\u` 的用法除外；這兩者均不受支援。
內建程式碼片段
VS Code 為多種語言內建了程式碼片段，例如：JavaScript、TypeScript、Markdown 和 PHP。
您可以透過執行命令面板中的 **插入程式碼片段** 命令來檢視特定語言的程式碼片段，該命令將顯示當前檔案語言的程式碼片段列表。但是，請注意，此列表還包括您定義的自定義程式碼片段以及您安裝的擴充套件提供的程式碼片段。
從 Marketplace 安裝程式碼片段
VS Code Marketplace 上的許多 擴充套件 都包含程式碼片段。您可以使用 `@category:"snippets"` 過濾器在擴充套件檢視（⇧⌘X (Windows、Linux Ctrl+Shift+X)）中搜索包含程式碼片段的擴充套件。
如果您找到想要使用的擴充套件，請安裝它，然後重啟 VS Code，新的程式碼片段將可用。
建立自己的程式碼片段
您可以輕鬆地定義自己的程式碼片段，無需任何擴充套件。要建立或編輯自己的程式碼片段，請在 **檔案 > 首選項** 下選擇 **配置程式碼片段**，然後選擇應顯示程式碼片段的語言（透過 語言識別符號），或者如果它們應顯示給所有語言，請選擇 **新建全域性程式碼片段檔案** 選項。VS Code 會為您管理底層程式碼片段檔案的建立和重新整理。
程式碼片段檔案使用 JSON 編寫，支援 C 風格的註釋，並且可以定義無限數量的程式碼片段。程式碼片段支援大多數 TextMate 語法以實現動態行為，根據插入上下文智慧格式化空格，並允許輕鬆進行多行編輯。
以下是一個 JavaScript 中 `for` 迴圈程式碼片段的示例
// in file 'Code/User/snippets/javascript.json'
{
"For Loop": {
"prefix": ["for", "for-const"],
"body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
"description": "A for loop."
}
}
在上面的示例中
- "For Loop" 是程式碼片段的名稱。如果未提供 `description`，它將透過 IntelliSense 顯示。
prefix定義一個或多個觸發詞，這些詞會在 IntelliSense 中顯示程式碼片段。會根據字首進行子字串匹配，因此在此情況下，“fc”可以匹配“for-const”。body是一行或多行內容，插入時會合併為多行。換行符和嵌入的製表符會根據程式碼片段的插入上下文進行格式化。description是程式碼片段的可選描述，在 IntelliSense 中顯示。
此外，上面示例的 `body` 中有三個佔位符（按遍歷順序排列）：`${1:array}`、`${2:element}` 和 `$0`。您可以使用 Tab 快速跳轉到下一個佔位符，然後您可以編輯該佔位符或跳轉到下一個。冒號 `:` 後的字串（如果存在）是預設文字，例如 `${2:element}` 中的 `element`。佔位符的遍歷順序按數字升序排列，從一（1）開始；零（0）是一個可選的特殊情況，它始終排在最後，並在指定位置退出程式碼片段模式，將游標置於該位置。
檔案模板程式碼片段
如果程式碼片段旨在填充或替換檔案的內容，您可以將 `isFileTemplate` 屬性新增到程式碼片段的定義中。檔案模板程式碼片段在您在新檔案或現有檔案中執行 **程式碼片段：從程式碼片段填充檔案** 命令時，會顯示在下拉選單中。
程式碼片段的作用域
程式碼片段會作用域化，以只建議相關的程式碼片段。程式碼片段可以透過以下方式進行作用域化：
- 程式碼片段的作用域的 **語言（可能所有）**
- 程式碼片段的作用域的 **專案（可能所有）**
語言程式碼片段作用域
每個程式碼片段都作用於一種、多種或所有（“全域性”）語言，具體取決於它是定義在
- 一個 **語言** 程式碼片段檔案
- 一個 **全域性** 程式碼片段檔案
單語言使用者定義的程式碼片段定義在特定語言的程式碼片段檔案中（例如 `javascript.json`），您可以透過 **程式碼片段：配置程式碼片段** 按語言識別符號訪問。程式碼片段僅在編輯為其定義的語言時才可用。
多語言和全域性使用者定義的程式碼片段都定義在“全域性”程式碼片段檔案中（檔案字尾為 `.code-snippets` 的 JSON），該檔案也可以透過 **程式碼片段：配置程式碼片段** 訪問。在全域性程式碼片段檔案中，程式碼片段定義可以有一個額外的 `scope` 屬性，該屬性接受一個或多個 語言識別符號，這使得該程式碼片段僅對指定的語言可用。如果未提供 `scope` 屬性，則全域性程式碼片段在 **所有** 語言中都可用。
大多數使用者定義的程式碼片段作用於單個語言，因此它們定義在特定語言的程式碼片段檔案中。
專案程式碼片段作用域
您還可以有一個作用域為專案的全域性程式碼片段檔案（檔案字尾為 `.code-snippets` 的 JSON）。專案資料夾程式碼片段是透過 **程式碼片段：配置程式碼片段** 下拉選單中的 **新建 '
程式碼片段語法
程式碼片段的 `body` 可以使用特殊構造來控制游標和插入的文字。以下是支援的功能及其語法：
製表符停止位
使用製表符停止位，您可以使編輯器游標在程式碼片段內部移動。使用 `$1`、`$2` 指定游標位置。數字是製表符停止位訪問的順序，而 `$0` 表示最終游標位置。同一製表符停止位的多個出現位置是連結的，並同步更新。
佔位符
佔位符是帶有值的製表符停止位，例如 `${1:foo}`。佔位符文字將被插入並選中，以便於修改。佔位符可以巢狀，例如 `${1:another ${2:placeholder}}`。
選擇
佔位符的值可以是選擇項。語法是逗號分隔的值列舉，用管道符 `|` 包圍，例如 `${1|one,two,three|}`。插入程式碼片段並選中佔位符時，選擇項會提示使用者從中選擇一個值。
變數
使用 `$name` 或 `${name:default}`，您可以插入變數的值。當變數未設定時，將插入其 **預設值** 或空字串。當變數未知時（即，其名稱未定義），將插入變數的名稱，並將其轉換為佔位符。
可以使用以下變數：
TM_SELECTED_TEXT當前選中的文字或空字串TM_CURRENT_LINE當前行的內容TM_CURRENT_WORD游標下的單詞內容或空字串TM_LINE_INDEX基於零索引的行號TM_LINE_NUMBER基於一索引的行號TM_FILENAME當前文件的檔名TM_FILENAME_BASE當前文件的檔名（不含副檔名）TM_DIRECTORY當前文件的目錄TM_FILEPATH當前文件的完整檔案路徑RELATIVE_FILEPATH當前文件相對於開啟的工作區或資料夾的相對檔案路徑CLIPBOARD剪貼簿的內容WORKSPACE_NAME已開啟的工作區或資料夾的名稱WORKSPACE_FOLDER已開啟的工作區或資料夾的路徑CURSOR_INDEX基於零索引的游標編號CURSOR_NUMBER基於一索引的游標編號
用於插入當前日期和時間
CURRENT_YEAR當前年份CURRENT_YEAR_SHORT當前年份的最後兩位數字CURRENT_MONTH月份（兩位數，例如“02”）CURRENT_MONTH_NAME月份的全名（例如“July”）CURRENT_MONTH_NAME_SHORT月份的簡稱（例如“Jul”）CURRENT_DATE月份的日期（兩位數，例如“08”）CURRENT_DAY_NAME星期幾的名稱（例如“Monday”）CURRENT_DAY_NAME_SHORT星期幾的簡稱（例如“Mon”）CURRENT_HOUR當前小時（24 小時制）CURRENT_MINUTE當前分鐘（兩位數）CURRENT_SECOND當前秒（兩位數）CURRENT_SECONDS_UNIX自 Unix 紀元以來的秒數CURRENT_TIMEZONE_OFFSET當前 UTC 時區偏移量，格式為 `+HH:MM` 或 `-HH:MM`（例如 `-07:00`）。
用於插入隨機值
RANDOM6 位隨機十進位制數字RANDOM_HEX6 位隨機十六進位制數字UUID版本 4 UUID
用於插入行註釋或塊註釋，並尊重當前語言
BLOCK_COMMENT_START示例輸出：在 PHP 中為 `/*` 或在 HTML 中為 ``LINE_COMMENT示例輸出：在 PHP 中為 `//`
下面的程式碼片段在 JavaScript 檔案中插入 `/* Hello World */`，在 HTML 檔案中插入 ``
{
"hello": {
"scope": "javascript,html",
"prefix": "hello",
"body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
}
}
變數轉換
轉換允許您在插入變數值之前對其進行修改。轉換的定義包含三個部分：
- 一個正則表示式，它與變數的值匹配，或者在變數無法解析時與空字串匹配。
- 一個“格式字串”，允許引用正則表示式的匹配組。格式字串允許條件插入和簡單的修改。
- 傳遞給正則表示式的選項。
以下示例插入當前檔名（不含副檔名），例如將 `foo.txt` 轉換為 `foo`。
${TM_FILENAME/(.*)\\..+$/$1/}
| | | |
| | | |-> no options
| | |
| | |-> references the contents of the first
| | capture group
| |
| |-> regex to capture everything before
| the final `.suffix`
|
|-> resolves to the filename
佔位符轉換
與變數轉換類似，佔位符轉換允許在移動到下一個製表符停止位時更改佔位符的插入文字。插入的文字與正則表示式匹配，匹配項（或多個匹配項，取決於選項）將替換為指定的替換格式文字。每個佔位符都可以獨立定義自己的轉換，使用第一個佔位符的值。佔位符轉換的格式與變數轉換相同。
轉換示例
示例顯示在雙引號內，就像它們出現在程式碼片段體中一樣，以說明需要雙重轉義某些字元。樣本轉換及檔名 `example-123.456-TEST.js` 的結果輸出。
| 示例 | 輸出 | 解釋 |
|---|---|---|
"${TM_FILENAME/[\\.]/_/}" |
example-123_456-TEST.js |
將第一個 `.` 替換為 `_` |
"${TM_FILENAME/[\\.-]/_/g}" |
example_123_456_TEST_js |
將每個 `.` 或 `-` 替換為 `_` |
"${TM_FILENAME/(.*)/${1:/upcase}/}" |
EXAMPLE-123.456-TEST.JS |
轉換為全部大寫 |
"${TM_FILENAME/[^0-9a-z]//gi}" |
example123456TESTjs |
移除非字母數字字元 |
語法
以下是程式碼片段的 EBNF（擴充套件巴科斯-瑙爾正規化）。使用 `\`（反斜槓），您可以轉義 `$`、`}` 和 `\`。在選擇元素內，反斜槓還會轉義逗號和管道字元。只有需要轉義的字元才能被轉義，因此 `$` 不應在這些構造中轉義，`$` 或 `}` 也不應在選擇構造內轉義。
any ::= tabstop | placeholder | choice | variable | text
tabstop ::= '$' int
| '${' int '}'
| '${' int transform '}'
placeholder ::= '${' int ':' any '}'
choice ::= '${' int '|' text (',' text)* '|}'
variable ::= '$' var | '${' var '}'
| '${' var ':' any '}'
| '${' var transform '}'
transform ::= '/' regex '/' (format | text)+ '/' options
format ::= '$' int | '${' int '}'
| '${' int ':' '/upcase' | '/downcase' | '/capitalize' | '/camelcase' | '/pascalcase' '}'
| '${' int ':+' if '}'
| '${' int ':?' if ':' else '}'
| '${' int ':-' else '}' | '${' int ':' else '}'
regex ::= JavaScript Regular Expression value (ctor-string)
options ::= JavaScript Regular Expression option (ctor-options)
var ::= [_a-zA-Z] [_a-zA-Z0-9]*
int ::= [0-9]+
text ::= .*
if ::= text
else ::= text
使用 TextMate 程式碼片段
您也可以使用現有的 TextMate 程式碼片段（.tmSnippets）與 VS Code。請參閱我們擴充套件 API 部分的 使用 TextMate 程式碼片段 主題以瞭解更多資訊。
為程式碼片段分配鍵盤快捷鍵
您可以建立自定義 鍵盤快捷鍵 來插入特定的程式碼片段。開啟 `keybindings.json`（**首選項：開啟鍵盤快捷方式檔案**），它定義了您所有的鍵盤快捷鍵，然後新增一個鍵盤快捷鍵，並將 `"snippet"` 作為附加引數傳遞。
{
"key": "cmd+k 1",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log($1)$0"
}
}
鍵盤快捷鍵將呼叫 **插入程式碼片段** 命令，但不會提示您選擇程式碼片段，而是直接插入提供的程式碼片段。您可以像往常一樣使用鍵盤快捷鍵、命令 ID 和可選的 when 子句上下文 來定義自定義 鍵繫結。
此外，您還可以使用 `langId` 和 `name` 引數來引用現有程式碼片段，而不是使用 `snippet` 引數值來內聯定義您的程式碼片段。`langId` 引數選擇程式碼片段的語言，由 `name` 指定，例如下面的示例選擇在 `csharp` 檔案中可用的 `myFavSnippet`。
{
"key": "cmd+k 1",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "csharp",
"name": "myFavSnippet"
}
}
後續步驟
- 命令列 - VS Code 具有豐富的命令列介面，可用於開啟或比較檔案以及安裝擴充套件。
- 擴充套件 API - 瞭解擴充套件 VS Code 的其他方法。
- 程式碼片段指南 - 您可以將程式碼片段打包以在 VS Code 中使用。
常見問題
如果我想使用 .tmSnippet 檔案中的現有 TextMate 程式碼片段怎麼辦？
您可以輕鬆地將 TextMate 程式碼片段檔案打包供 VS Code 使用。請參閱我們擴充套件 API 文件中的 使用 TextMate 程式碼片段。
如何在貼上的指令碼中包含一個變數的程式碼片段？
要在貼上的指令碼中包含一個變數，您需要轉義 `$` 符號，使其成為 `\$variable`，這樣它就不會被程式碼片段展開階段解析。
"VariableSnippet":{
"prefix": "_Var",
"body": "\\$MyVar = 2",
"description": "A basic snippet that places a variable into script with the $ prefix"
}
這將導致貼上的程式碼片段如下：
$MyVar = 2
我能否從 IntelliSense 中移除程式碼片段？
是的，您可以透過選擇 **插入程式碼片段** 命令下拉選單中程式碼片段項右側的 **從 IntelliSense 隱藏** 按鈕，來隱藏特定的程式碼片段不顯示在 IntelliSense（補全列表）中。
您仍然可以使用 **插入程式碼片段** 命令選擇程式碼片段，但隱藏的程式碼片段不會顯示在 IntelliSense 中。