emmets是coding的各位必用的功能,而在VS code這款IDE上要如何自己寫想要的emmet指令呢,這邊教給大家
像我想要定義我打下「un」按下tab鍵後就會有
<img src="http://unsplash.it/60/80" alt=pic >
這一行的img tag。
首先我們先打開vs code 的 code
再來打開preferences的user snippets
然後輸入要使用什麼語言時可以使用這個emmet,這邊範例:html
然後系統會開一個json檔案給你編輯。
這邊給一個小技巧是打下sn就會有emmets可以用,我們把它展開會長這樣:
{
"snippetName": {
"prefix": "prefix",
"body": "snippet",
"description": "description"
}
}
我依序輸入
{
"unsplash": {
"prefix": "un",
"body": "<img src=\"http://unsplash.it/$1/$2\" alt=$3 >",
"description": "for fake pictures"
}
}
snippetname:這個快捷鍵的名稱(自己取)
prefix(重要):要輸入什麼然後按下tab可以展開
body(重要):展開什麼。body中,可以用$1、$2、$3去編輯展開後想要tab停在哪裡。$1是第一次展開完會跳到的地方,$2是按第二次tab會跳到的地方,依此類推。挺實用的!
最後按下儲存,就大功告成拉!

回到html文件試試看吧!
每一個IDE自訂emmets的格式都不太一樣,雖然大部分都是用snippets的方式,但是格式些微不同。這邊提供的是用在VS code這款IDE上面。
*後來熊熊自己在增加snippet的時候,發現都沒用,結果檢查一下發現,原來是我家錯檔案了,原本要家給less的emmet卻加在html的檔案裡。所以大家如果發現設定好後沒有效果的話,可以看是不是加錯檔案呦。
*本來想說會不會要重新打開程式新增的Snippet才會進去,結果發現在VS code裡面是不用的呦!加完儲存就會有了。