開啟設定

• 方法一：開啟設定面板->選擇使用者的程式碼片段
• 方法二：按 ctrl + alt + p

選擇建立程式碼片段

1. 可以直接開啟現有程式碼片段
2. 可以選擇建立全域性程式碼片段
3. 可以選擇建立當前資料夾的程式碼片段

新建完成的程式碼片段有預設參考例子,開啟註釋可以測試

輸入log ,可以看到第一個是我們自己新增的程式碼片段

snippet語法

"Print to console": {
    "scope": "javascript,typescript",
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}

 

• Print to console 程式碼片段名稱
• scope 使用的語言範圍
• prefix 觸發當前的 snippt 片段
• body 程式碼片段的具體內容
• description 程式碼片段的描述

片段語法

body 片段裡面可以使用特殊的結構來控制插入的游標和文字。

佔位符

使用 $ 符號作為佔位符，當輸入程式碼片段的 prefix 後按 tab 鍵可以生成程式碼片段，然後再按 tab 鍵可以調到下一個佔位符。佔位符一般從 $1 開始，依次增加。

$0 用於設定最終游標的位置，設定了 $0 之後，再往後設定其他佔位符則不會生效， $0 終止了 TAB鍵 的游標跳轉操作。

佔位內容的可選項

"desc": {
		"scope": "javascript,typescript",
		"prefix": "desc",
		"body": [
			"/**",
			" * @Description ${1}",
			" * @Author holyer",
			" * @Date $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
			" * @param { ${2|Boolean,Number,String,Object,Array,*|} }",
			" * @return { ${3|Boolean,Number,String,Object,Array,*|} }",
			" */",
		],
		"description": "方法註釋"
	},
 

上面是一個簡單的方法註釋程式碼塊，佔位符預設不帶可選項，如果要設定佔位內容的可選項，寫法為 ${1|a,b,c}，括號中的 1 對應的是按 TAB 之後的游標落點順序， abc 為可選的項，用逗號隔開。所以上面的程式碼在輸入 desc + TAB 後第一個游標會落在 param name... {} 的大括號中（$1 的位置），如下圖可以看到設定的可選項。

選擇了引數型別之後，再次按 TAB , 游標會自動落到返回引數型別處（$2 的位置）並彈出可選項。

注意：

• 如果可選擇內容只有一個值的話可以寫成 ${1:default} 的格式。
• 佔位內容支援巢狀，比如 ${1:another ${2:placeholder}}。

變數

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 當前文件的完整檔案路徑
• RELATIVE_FILEPATH 當前文件的相對（相對於開啟的工作區或資料夾）檔案路徑
• CLIPBOARD 剪貼簿的內容
• WORKSPACE_NAME 開啟的工作區或資料夾的名稱
• WORKSPACE_FOLDER 開啟的工作區或資料夾的路徑

2. 日期和時間相關：

• CURRENT_YEAR 本年度
• CURRENT_YEAR_SHORT 當前年份的最後兩位數字
• CURRENT_MONTH 月份為兩位數（例如“02”）
• CURRENT_MONTH_NAME 月份的全名（例如“七月”）
• CURRENT_MONTH_NAME_SHORT 月份的簡稱（例如“Jul”）
• CURRENT_DATE 一個月中的哪一天
• CURRENT_DAY_NAME 日期名稱（例如“星期一”）
• CURRENT_DAY_NAME_SHORT 一天的簡稱（例如“星期一”）
• CURRENT_HOUR 24 小時制的當前小時
• CURRENT_MINUTE 當前分鐘
• CURRENT_SECOND 當前秒
• CURRENT_SECONDS_UNIX 自 Unix 紀元以來的秒數

3. 插入隨機值：

• RANDOM 6 位隨機 Base-10 數字
• RANDOM_HEX 6 位隨機 Base-16 數字
• UUID 版本 4 UUID

4. 插入註釋相關：

• BLOCK_COMMENT_START示例輸出：PHP/*或 HTML<!--
• BLOCK_COMMENT_END示例輸出：PHP*/或 HTML-->
• LINE_COMMENT 示例輸出：在 PHP 中 //

個人片段

1. 方法註釋

   "desc": {
   		"scope": "javascript,typescript",
   		"prefix": "desc",
   		"body": [
   			"/**",
   			" * @Description ${1}",
   			" * @Author holyer",
   			" * @Date $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
   			" * @param { ${2|Boolean,Number,String,Object,Array,*|} }",
   			" * @return { ${3|Boolean,Number,String,Object,Array,*|} }",
   			" */",
   		],
   		"description": "方法註釋"
   	},
   

2. 定義箭頭函式

   "defn": {
       "scope": "javascript,typescript",
       "prefix": "defn",
       "body": [
           "const $1 = () => {",
           "$2",
           "}",
       ],
       "description": "新建箭頭函式"
   }
   

程式碼片段生成器：https://snippet-generator.app/

參考：

• https://juejin.cn/post/6844903869424599053
• https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax