由於很常使用VSCode 開發網頁，而常用的輸入文字希望快速產生，這時就會借用自訂 Snippets功能，
VSCode 設定上挺簡單的，一些細節還是紀錄一下
開啟「User Snippets」，在設定 → User Snippets
點選後會有相關下拉選項，也可以透過輸入關鍵字快速篩選
我這邊示範 javascript
開啟檔案後，會有預設說明如何使用
可以先將 Eample 的部分取消註解，來體驗手感(修改後記得要儲存)
當我打出 log 關鍵字，就會有個前綴詞 log 並且後方會有個提示說明 Print to console
而滑鼠移上去點一下，可以看到描述跟片段內容
接著來觀察實際設定
所有的 snippets 檔案都是 .json 格式，故可以新增屬性的方式新增片段
屬性名稱：如 "Print to console" 代表 提示字串
prefix : 代表輸入的關鍵字
body : 代表程式碼片段內容
$ : 代表定位關鍵字，後面緊接著為數字，如 $0,$1,$2…，由小到大依序定位，按tab 鍵切換
輸入 log 並且按下 tab，可以發現帶出剛剛的片段後，並且游標會停留在 「$1」 的位置，
方便進行後續設定
但若希望可以有預設值，並且又可以同時支援定位，可以怎麼設定？
如同註解的說明，同樣使用「$」關鍵字開頭，搭配{}來實現，內容
以數字啟動，再搭配「:」符號，後面接你要得預設值
以下我的其中一項設定
當我輸入前綴詞，會帶出符合的下拉選項
按下tab 後，可以看到帶出定位並且保有預設值
另外，值得注意的是
若body語法中有 " 符號，可以用跳脫字元 \" 來表示
若body語法中有 $ 符號，可以用 \\$ 來表示
若body 內容太長，可以用「,」分割，代表多個陣列元素字串，VS 會自動串起來
其他稍微進階的用法
若要做成選項讓使用者直接選擇
method=\"${2|post,get|}\"
若該片段需要同時支援多程式碼語言
加入 scope 屬性，並且內文中使用 「,」區分
尚有一些預設的變數可用
$TM_FILENAME_BASE → 當前檔案的名稱(不含副檔名)
$CURRENT_YEAR → 當下西元年
$CURRENT_MONTH → 當下月份
$CURRENT_DATE → 當下日期
可以串接如下應用
"date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE"
參考
沒有留言:
張貼留言