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里面是不用的呦!加完储存就会有了。