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