自定义Emmet/sublime中模板内容-Brackets使用心得

分类:WEB前端发布时间:2015-11-25 10:58作者:乐潇游来源:LXYWEB热度:1840 ℃

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

blob.png

如果我想把它根据自己的习惯定制的更加完美,那怎么办呢?

比如说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)"

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

blob.png

那么语句应该改为:

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

 

如上所示:

标签应该直接写标签名就好了,比如div

标签中的属性/属性值应该跟在标签后面div[name=dada],有多个属性就放多个[],div[name=dada][age=26]

标签中的内容应该用{DADADA}表示


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