打開設置
- 方法一：打開設置面板->選擇用戶的代碼片段
- 方法二：按
ctrl + alt + p
選擇創建代碼片段
- 可以直接打開現有代碼片段
- 可以選擇創建全局代碼片段
- 可以選擇創建當前文件夾的代碼片段
新建完成的代碼片段有默認參考例子,打開注釋可以測試
輸入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_HOUR24 小時制的當前小時CURRENT_MINUTE當前分鍾CURRENT_SECOND當前秒CURRENT_SECONDS_UNIX自 Unix 紀元以來的秒數
3. 插入隨機值：
RANDOM6 位隨機 Base-10 數字RANDOM_HEX6 位隨機 Base-16 數字UUID版本 4 UUID
4. 插入注釋相關：
BLOCK_COMMENT_START示例輸出：PHP/*或 HTML<!--BLOCK_COMMENT_END示例輸出：PHP*/或 HTML-->LINE_COMMENT示例輸出：在 PHP 中//
個人片段
-
方法注釋
"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": "方法注釋" }, -
定義箭頭函數
"defn": { "scope": "javascript,typescript", "prefix": "defn", "body": [ "const $1 = () => {", "$2", "}", ], "description": "新建箭頭函數" }
代碼片段生成器：https://snippet-generator.app/
參考：