Emmet在开发效率上给我们带来了很多方便，Emmet中默认的H5的文档是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

如果我想把它根据自己的习惯定制的更加完美，那怎么办呢？
比如说head中加上：<link rel="stylesheet" href="css/master.css">
在body中加上：<script src="js/main.js"></script>
（上面两个文件一般情况下是经常性需要的）

起步

下面我们来一起DIY吧：
首先我们找到Emmet提供了可自定义的配置文件: snippets.json
以Brackets为例，该文件位置在/user/brackets-emmet/node_modules/emmet/lib/snippets.json。

准备

在这个文件中我们找到：

"doc": "html>(head>meta[charset=UTF-8]+title{${1:Document}})+body)"

默认代码显示后的效果就是上面那样。但是我们要加上上面两个文件引用，效果应该是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/master.css">
</head>
<body>
    <script src="js/main.js"></script>
</body>
</html>

修改

那么语句应该改为（修改之前记得先拷贝一份，免得改错了回不来了）：

"doc": "html>(head>meta[charset=UTF-8]+title{${1:Document}}+link[rel=stylesheet][href=css/master.css])+(body>script[src=js/main.js])"

完成

修改完了代码重启一下你的Brackets软件试试，如你所期待的样子了吧。

其他

同理，我们还以改改别的，这里总结一下修改的要点：

  • 添加标签直接写标签名就好了，比如div。
  • 标签中的属性/属性值直接跟在标签后面div[name=vimplus],有多个属性就放多个[],比如div[name=vimplus][age=25]。
  • 标签中的内容用{}表示。

试试下面的代码：

"doc": "html>(head>meta[charset=UTF-8]+title{${1:Document}}+link[rel=stylesheet][href=css/master.css])+(body>div[name=vimplus][age=25]{Content Text}+script[src=js/main.js])",

好了，照葫芦画瓢，大家打开自己的脑洞，自己研究研究，自定义出更多方便的模板吧，快乐学习，潇洒游四方！

相关标签
Emmet Brackets