在「實戰4」中,我們完成了用函式替代公式的實作,但在最後留下一個疑問:函式名太長怎辦?身為一個記性差的人,我的解法就是 Snippet。
Snippet 是啥?Snippet 是可重複使用的短程式片段,常見於兩種情境:
Snippet。而我指的 Snippet 就是 IDE Snippet,以下將聚焦於我平常使用的 VSCode。
VSCode 對於 Snippet 的設定分為 Global 與 Project:
這個設定適用於所有專案,所以我平常較少使用,避免污染其他專案設定。
依序點擊:Code > Preferences > Configure Snippets。

按鈕位置可能因 VSCode 版本不同而有所變動。
Command + P 或 Ctrl + P )。> Snippet。Configure Snippets。
在專案根目錄創建 .vscode/[language-identifier].code-snippets 文件即可。
例如我想要 js 專用 Snippet 設定:
.vscode/javascript.code-snippets。如果文件名不想使用 javascript.code-snippets,可以在 code-snippets 設定中指定 scoped:
scope 設定,會以這個設定為主。scope 設定,會看檔名 id。Snippet 設定是一個 json,我平常會用的設定就三個:scope、prefix、body。
, 區隔,例如 javascript,typescript。{
"!!": {
"scope": "javascript,typescript",
"prefix": "hi",
"body": "hi :) !!"
}
}

scope 寫了 javascript,typescript,所以 .js 跟 .ts 的文件都有跳出對應的 snippet。scope 沒有寫 sass 的 id,所以 .sass 檔就沒有跳出對應的 snippet。{
"!!": {
"scope": "javascript",
"prefix": ["hi", "hello"],
"body": "hi :) !!"
}
}

hi 或 hello 都有跳出 snippet。
\n。$ 開頭的特殊指令可以使用。$ 後面加上數字代表游標順序,案 tab 可以跳到下一個數字的位置。$1 開始。$0 是最後一個,代表結束編輯。{
"!!": {
"scope": "javascript",
"prefix": "hi",
"body": ["$2", "---", "$0", "---", "$1"]
}
}

順序為:$1 -> $2 -> $0。
VSCode 提供很多特殊變數可用,例如當前的年月日等,以下擷取幾個官方文件的變數說明:
CURRENT_YEAR: The current yearCURRENT_MONTH: The month as two digits (example '02')CURRENT_DATE: The day of the month as two digits (example '08')在 VSCode 提供的變數前面加 $ 即可。
{
"!!": {
"scope": "javascript",
"prefix": "hi",
"body": "$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE"
}
}

輸入 hi 後,按下 tab 就變成當前日期了。
${順序:default}:什麼都不輸入直接按 tab,會使用默認值。{
"!!": {
"scope": "javascript",
"prefix": "hi",
"body": ["${1:aaa}", "${2:aaa}", "${3:$CURRENT_YEAR}"]
}
}

$1 直接按 tab,結果是 aaa。$2 開始打字後,aaa 就被清掉了。$3 默認值可以是特殊變數(當前年份)。${順序|default1,default2,...|}:讓你的默認值有多個選擇{
"!!": {
"scope": "javascript",
"prefix": "hi",
"body": "${1|aaa,bbb,ccc|}"
}
}

$因為 $ 被拿去做特殊指令的辨識符,如果想輸出 $,需使用 \ 來跳脫。
{
"!!": {
"scope": "javascript",
"prefix": "hi",
"body": "\\$1"
}
}

\ 是用來跳脫第二個 \ 的,因為 \ 在字串中有特殊意義,為了輸出 \,需要在前面多一個 \ 來跳脫。\ 後,就能用 \ 來跳脫 $ 了。其他太複雜的功能平常根本用不到,我其實只會用到游標順序而已 😃
現在我們就能解決函式名太長而記不住的問題,解決辦法就是將「實戰4」的函式呼叫字串寫進 body 中,並想個縮寫設定在 prefix 即可,所以我們需要先規劃縮寫:
pxToVw 縮寫用 vw。pxToVwClamp 縮寫用 vwc。pxToVwExtend 縮寫用 vwe。延續「實戰4」的函式名定義,後面會加上數字。
.vscode/jay.code-snippets
{
"vw1": {
"scope": "html,css,sass,scss,less,stylus",
"prefix": "vw1",
"body": "pxToVw1($1)$0"
},
"vwc1": {
"scope": "html,css,sass,scss,less,stylus",
"prefix": "vwc1",
"body": "pxToVwClamp1($1)$0"
},
"vwe1": {
"scope": "html,css,sass,scss,less,stylus",
"prefix": "vwe1",
"body": "pxToVwExtend1($1)$0"
},
"vw2": {
"scope": "html,css,sass,scss,less,stylus",
"prefix": "vw2",
"body": "pxToVw2($1)$0"
},
"vwc2": {
"scope": "html,css,sass,scss,less,stylus",
"prefix": "vwc2",
"body": "pxToVwClamp2($1)$0"
},
"vwe2": {
"scope": "html,css,sass,scss,less,stylus",
"prefix": "vwe2",
"body": "pxToVwExtend2($1)$0"
}
}

v 開頭,這樣輸入 v 後,就會跳出我們設定的所有縮寫。如此就能解決函式名太長的問題,幾乎不用記憶~
為了提升等比縮放的開發體驗,我們做了兩件事:
postcss 來實現函式呼叫替換公式。Snippet 來輸入函式呼叫。其實整個提升開發體驗的部分到這就都分享完了,但在重新檢視整個開發過程後,會發現有個困擾:我們需「手動」維護整套函式呼叫程式碼與 Snippet,身為一個懶人開發者,有沒有可能只需準備設計稿寬度等資訊,就能自動生成這個工作流所需的所有工具呢?下篇將揭曉工作流的最後一塊拼圖~也就是在「用等比縮放達到我心中的 pixel perfect」提過的秘密武器,我們下篇見!