VS code设定增加自定义Emmets snippets程式-马克熊

VS code设定增加自定义Emmets snippets程式-马克熊

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

币安手机注册流程

0 0 投票数
Article Rating
订阅评论
提醒
guest
0 Comments
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x