Sublime编辑器中HTML自动补全插件:Emmet简介 2016-10-24


工欲善其事必先利其器!Sublime一直是我们团队最喜欢的开发工具。简单,高效,启动快!可以运行在各种平台!

之前我们开发模板都使用Dreamweaver,但是Dreamweaver太过笨重了。

Sublime配合 Emmet插件,可以非常快捷的书写html代码,大大的提升了模板开发的效率。


【安装】启动Package Control  输入 Install Package  搜索 emmet  点击安装  重启即可生效


安装完成后 我们就可以在模板开发中来使用了。


【1】快速生成  class和id的元素

.alert.alert-danger#info-btn

 在简写完后 只需要按 Tab键 就可以自动生成完整的元素


【2】子元素关系 使用 child


【3】兄弟结点(slibing)使用 加号 +



【4】生成多个元素 使用 星号  *


【5】组合 使用 括号 ()

div>(header>ul>li*2>a)+footer>p


【6】属性 attribute 使用 中括号 []



【7】元素自增序号 使用 $




也可以使用多个$ 比如




【8】@符号可以控制 数字的排序方式 + 为升序 - 为降序 如果后面带数字 则表示为起始数字



【9】 元素文本内容 使用 大括号 {}



更多参考 请查看

http://docs.emmet.io/abbreviations/syntax/

本文章为 LaravelStore官网原创 转载请注明出处。谢谢合作!