Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow --emmet.io
emmet作为一款快速书写html&css的前端开发工具,对于本人来说,对这款工具是否能完美支持,已成为评判ide编辑器是否优越的依据,足以见得本人是深度emmet fans。sublime text+emmet 如鱼得水,结合使用,用的好,写代码效率事半功倍 ^_^ !!
当然,这篇文章不是准备歌颂ST的,而是为怎么用好emmet这款强大的工具而写!
言归正传,emmet除了上面强大的功能外,还可自定义代码段snippets。比如 说:bd+ + tab 输出 border:1px solid #000,如果是st2我们可以重写 emmet 扩展目录下的snippets.json文件可实现snippets重写!
但sublime text3重写方式不同于sublime text2,st3的重写方法是:
package settings → emmet → settings-user ,这个菜单打开的实则是st3根目录下的Data\Packages\User\Emmet.sublime-settings
,我们可以参考st2 snippets.json的书写格式,该文件默认定义参考链接:
https://github.com/emmetio/emmet/blob/master/snippets.json
https://docs.emmet.io/customization/snippets/
我们只需在Emmet.sublime-settings文件重写要重新定义的snippets即可,
{
"snippets": {
"css": {
"filters": "html",
"snippets": {
"bd+": "border:${1:1px} ${2:solid} #${3:f00};",
"bgc": "background-color:#${1:f00};"
}
}},
}重写规则后,必须得重启st3更改才能生效。
值得注意的是,照官方说明:
https://docs.emmet.io/css-abbreviations/vendor-prefixes/
css3属性是默认智能加上浏览器前缀输出的,如:bdrs输出
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;
本人试过将bdrs重写,使之不带浏览器前缀输出,但发现找不到官方提供的方法,不知能否实现,有知道实现方法的网友,请告知,不甚感谢!
另附:
st3 版本程序目录结构的重大调整:https://www.phpvar.com/archives/2917.html
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}