VSCode 利用 Snippets 設置超實用的代碼塊

1、起步

1. 依次點擊 文件 > 首選項 > 用戶代碼片斷

2. 選擇代碼片斷或建立代碼片斷（能夠對現有的進行修改，也能夠新建代碼片斷）

代碼片斷分兩種：

• ① 全局代碼片斷（每種語言環境下都能觸發代碼塊）。
• ② 對應語言的局部代碼片斷（只能在對應語言環境下才能觸發），新建全局代碼片斷會在 snippets 目錄下生成 .code-snippets 爲後綴的配置文件，而新建對應語言的代碼片斷會生成 對應語言 + .json 的配置文件。

下圖是建立代碼塊的開始界面：

2、Snippet 語法

示例：console.log 代碼塊

"console.log": {
    "prefix": "log",
    "body": [
      "console.log($1)",
      "$2"
    ],
    "description": "console.log快捷"
  }
複製代碼

如下說明都用上面的 console.log 代碼塊舉例：

• console.log 對應代碼片斷名稱。
• prefix 對應觸發代碼片斷的字符。
• body 對應代碼片斷內容，能夠是字符串，也能夠爲數組，若爲數組每一個元素都作爲單獨的一行插入。body 的內容支持js的轉義字符，如 \n\r 等，我我的不建議用 \n ，可另起一行給數組多插入一項，否則一行太多的話不容易觀察代碼塊的格式。
• description 對應代碼片斷描述。

如上圖所示，「console.log快捷」是代碼塊的描述，出如今關閉icon的左邊，而後下面是代碼塊的預覽。

1.佔位符 $

log 方法中 $ 後面緊跟數字可指定代碼片斷觸發落入編輯器以後的光標位置，光標位置按照從小到大排序。 log 方法中當你輸入 log + TAB 以後光標會默認落到 log() 的括號中（$1 的位置），若是此時沒有手動移動光標位置，再次按 TAB 則光標會落到 console.log() 的第二行（ $2 的位置），固然，你也能夠設置 $三、$4 ... 等等。須要特別注意的是 $0 用於設置最終光標的位置，設置了 $0 以後，再日後設置其餘佔位符則不會生效， $0 終止了 TAB鍵 的光標跳轉操做。

2.佔位內容的可選項

"方法註釋": {
    "prefix": "zs-Function",
    "body": [
      "/**",
      " * @param name... { ${1|Boolean,Number,String,Object,Array|} }",
      " * @description description...",
      " * @return name... { ${2|Boolean,Number,String,Object,Array|} }",
      " */",
      "$0"
    ],
    "description": "添加方法註釋"
  }
複製代碼

上面是一個簡單的方法註釋代碼塊，佔位符默認不帶可選項，若是要設置佔位內容的可選項，寫法爲 ${1|a,b,c}，括號中的 1 對應的是按 TAB 以後的光標落點順序， abc 爲可選的項，用逗號隔開。因此上面的代碼在輸入 zs + TAB 後第一個光標會落在 param name... {} 的大括號中（$1 的位置），以下圖能夠看到設置的可選項。

選擇了參數類型以後，再次按 TAB , 光標會自動落到返回參數類型處（$2 的位置）並彈出可選項。以下所示：

選擇了第二個選項以後，再次按 TAB ,光標自動落到咱們配置的 $0 處，也就是 */ 的下一行：

須要注意的是：

• 若是可選擇內容只有一個值的話能夠寫成 ${1:default} 的格式。
• 佔位內容支持嵌套，好比 ${1:another ${2:placeholder}}。

3.變量

使用 $name 或者 ${name:default} 能夠插入變量的值。若是未設置變量，則會插入其默認值或空字符串。當變量未知（未定義其名稱）時，會將插入的變量名稱轉換爲佔位符。

VSCode 中可使用如下變量：

1）文檔相關：

變量	變量含義
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	已打開的工做空間或文件夾的名稱

2）當前日期和時間：

變量	變量含義
CURRENT_YEAR	當前年份
CURRENT_YEAR_SHORT	當前年份的最後兩位數
CURRENT_MONTH	月份爲兩位數（例如'02'）
CURRENT_MONTH_NAME	月份的全名（例如'June'）（中文語言對應六月）
CURRENT_MONTH_NAME_SHORT	月份的簡稱（例如'Jun'）（中文語言對應是6月）
CURRENT_DATE	這個月的哪一天
CURRENT_DAY_NAME	當天是星期幾（例如'星期一'）
CURRENT_DAY_NAME_SHORT	當天是星期幾的簡稱（例如'Mon'）（中文對應週一）
CURRENT_HOUR	24小時時鐘格式的當前小時
CURRENT_MINUTE	當前分
CURRENT_SECOND	當前秒

3）要插入行或塊註釋，請遵循當前語言：

變量	變量含義
BLOCK_COMMENT_START	輸出：PHP /*或HTML格式<!--
BLOCK_COMMENT_END	輸出：PHP */或HTML格式-->
LINE_COMMENT	輸出：PHP //或HTML格式

舉個栗子：

下面的代碼塊是經常使用的文件頂部添加做者和時間的塊註釋，其中用到了年（CURRENT_YEAR）月（CURRENT_MONTH）日（$CURRENT_DATE）的系統變量。

"做者和時間註釋": {
    "prefix": "zs-Author & Time",
    "body": [
      "/**",
      " * Created by preference on $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE",
      " */",
      "$0"
    ],
    "description": "添加做者和時間註釋"
  }
複製代碼

再舉個栗子：

下面的代碼塊是新建 .Vue 文件的模板代碼塊，其中用到了當前文檔沒有擴展名的文件名（TM_FILENAME_BASE），默認把文件名填入 name 和 class 中。

"Vue模板": {
    "prefix": "vue-template",
    "body": [
      "<template>",
      " <section class=\"$TM_FILENAME_BASE\">",
      " $1",
      " </section>",
      "</template>\n",
      "<script>",
      "export default {",
      " name: '$TM_FILENAME_BASE',",
      " data() {",
      " return {\n",
      " }",
      " },",
      " components: {},",
      " watch: {},",
      " mounted() {},",
      " methods: {}",
      "}",
      "</script>\n",
      "<style scoped lang=\"less\">\n",
      "</style>",
      "$0"
    ],
    "description": "Vue模板"
  }
複製代碼

3、結語

經過佔位符和變量組合，各位童鞋能夠充分發揮本身的想象力去設置本身喜歡的、經常使用的代碼片斷，提升開發效率和開發體驗，但願這篇文章能給你們帶來幫助，若有錯誤可在評論者提出。

參考文章：Creating your own snippets in Visual Studio Code