VSCode中怎麼定義程式碼片段，讓編碼快到飛起！

程式碼片段可以理解為模板，當我們輸入指定時，按下【tab】或者【enter】即可出現對應的模板。【推薦學習：《》】

只要程式碼片段寫的好，升職加薪少不了~

程式碼片段的好處與壞處

coder對程式碼片段的評價褒貶不一，下面這張圖解釋了程式碼片段的好處與壞處：

何時使用程式碼片段

關於什麼時候使用程式碼片段，我的建議是：

• 當你對一個東西足夠熟練，例如console.log()，這個時候可以為其設定程式碼片段。
• 有些東西特別繁瑣，每次都需要寫一遍，例如Vue單檔案中的初步定義的內容。

當然，上面的內容僅僅是我的建議。

如何設定程式碼片段

首先你準備一個VSCode，然後確定你作業系統，然後開始操作：

• Windows系統:【 檔案】→【偏好設定】→【使用者片段】
• Mac系統: 【Code】→【偏好設定】→【使用者片段】

然後你就可以看到下面這個內容

然後你就可以對現有的程式碼片段進行修改，或者建立一個新的程式碼片段，這裡我們建立一個名為test-snippets的全域性程式碼片段，來進行演示。

程式碼片段語法

我們建立完成以後，會出現一個類似於JSON的語法，內容如下：

{
  // Place your 全域性 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  //   "scope": "javascript,typescript",
  //   "prefix": "log",
  //   "body": [
  //     "console.log('$1');",
  //     "$2"
  //   ],
  //   "description": "Log output to console"
  // }
}

接下來我們對VSCode中的程式碼片段語法進行學習。

首先中的內容是被一個物件進行包裹，物件中的每一個屬性表示一個程式碼片段，屬性名為程式碼片段的名稱，在觸發程式碼片段的時候會展示匹配到的程式碼片段名稱，例子中的屬性名稱為Print to console。

接下來我們學習程式碼片段內每個屬性是幹什麼的。

• scope：表示程式碼片段作用於哪種語言。 不同語言之間以,隔開。 常用的有javascript, typescript,html,css,vue等。 如果設定為""就代表所有地方都生效。
• prefix：對應觸發程式碼片段的字元。
• description：程式碼片段的描述。
• body：物件程式碼片段的內容，通常為一個陣列，陣列內的一行對應生成程式碼片段後的一行。

推薦一個用於生成程式碼片段的網站，連結如下：https://snippet-generator.app/

$預留位置

上面的例子中，我們輸入log按下【tab】鍵即可出現如下程式碼：

console.log();

出現這段內容後，遊標在()內，然後按下【tab】鍵，遊標即可調到下一行，也就是$2的位置，同樣的道理，我們還可以設定$3、$4 等等

值得注意的是：$0用於設定最終遊標的位置。

預設與可選項

如果想讓預留位置中具有一個預設值，可以通過${1:defalt}的形式來編寫。

如果行提供一些選項，可以通過${1|one,two,three|}的形式來編寫，例如：

{
  "import": {
    "scope": "javascript,typescript",
    "prefix": "import",
    "body": [
      "import { $2 } from \"${1|axios,lodash,day|}\"",
      "$3"
    ],
    "description": "匯入模組"
  }
}

測試如下：

然後按下【tab】後如下圖

常數

在程式碼片段中，VSCode為我們提供了一些常數，使用方式也比較簡單，例如$TM_FILENAME。

TM_SELECTED_TEXT       當前選定的文字或空字串
TM_CURRENT_LINE        當前行的內容
TM_CURRENT_WORD        遊標下的單詞的內容或空字串
TM_LINE_INDEX          基於零索引的行號
TM_LINE_NUMBER         基於一索引的行號
TM_FILENAME            當前檔案的檔名
TM_FILENAME_BASE       當前檔案的檔名（不含字尾名)
TM_DIRECTORY           當前檔案的目錄
TM_FILEPATH            當前檔案的完整檔案路徑
CLIPBOARD              剪下板裡的內容
WORKSPACE_NAME         已開啟的工作空間或資料夾的名稱

CURRENT_YEAR           當前年(四位數)
CURRENT_MONTH          當前月
CURRENT_DATE           當前日
CURRENT_DAY_NAME_SHORT 當天的短名稱（’Mon’）
CURRENT_HOUR           當前小時
CURRENT_MINUTE         當前分鐘
CURRENT_SECOND         當前秒

BLOCK_COMMENT_START   塊註釋開始標識,如 PHP /* 或 HTML <!--
BLOCK_COMMENT_END     塊註釋結束標識,如 PHP */ 或 HTML -->
LINE_COMMENT          行註釋，如： PHP // 或 HTML <!-- -->

為專案建立程式碼片段

有些時候我們需要為具體的專案建立一些程式碼片段，其實也比較簡單，我們只需要在當前專案的根目錄建立一個.vscode資料夾，然後建立以.code-snippets的結尾的檔案即可，寫法與上面一致。

寫在最後

這裡我建立了一個GitHub倉庫，放一些VSCode中的程式碼片段，倉庫地址如下：https://github.com/ywanzhou/vscode-snippets

都看到這了，還不點贊支援一下~

更多關於VSCode的相關知識，請存取：！！

以上就是VSCode中怎麼定義程式碼片段，讓編碼快到飛起！的詳細內容，更多請關注TW511.COM其它相關文章！