emmet,让你的html飞起来
sublime作为一款强大的文本编辑器,其诸多特性使得之前用notepad2的我毅然舍弃了旧爱,奔向的新欢。作为一枚程序猿,编码的效率自然也是非常重要的,最初写页面时,全部的标签都是手打,不仅效率底下而且容易出现漏错。之后接触到了emmet这一神器,自然要善加利用。
emmet是什么
首先是官网上的介绍。
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.
Emmet 是一个可用在许多流行文本编辑器上的极大简化HTML和CSS工作流程的插件。
前身是Zen coding,他使用仿css选择器的语法来生成代码,极大提高了编写HTML/CSS的效率,之后改名为emmet,但是随之而来的改变不仅限于名字,还增加了许多新的特性。
emmet怎么用
tips:以下用法基于Windows下的Sublime Text3
文档结构初始化
对于html文档来说,文档类型DOCTYPE,<head>
、<html>
、<body>
这些标签都是必须的,如果每次都手工录入的话效率很低,使用emmet就可以在空白html文档中输入
1 | // type |
添加类、id、文本和属性
emmet的一个强大特性,使用类CSS选择器的方式,.是生成类名,#是生成id,{}中生成文本内容,[]中可以设置属性,可以嵌套使用。话不多说,上demo。
1 | // type |
嵌套和分组
emmet又一个强大的特性,也是让你写html速度起飞的关键因素。
嵌套语法:
>:子元素符号,表示嵌套的元素
+:同级标签符号
^:可以使该符号前的标签提升一行
其中^用的不多,容易让人逻辑混乱,这个时候就需要良好的分组来实现。翠花,上demo!
1 | // type |
重复添加相同元素
写页面的时候经常会遇到很多重复的结构用来显示数据,比如无序列表ul,如果列表项很多,手打就显得效率十分低下,好在emmet可以帮我们完美解决这个问题。
1 | // type |
加上分组的应用,可以处理更复杂的html结构
1 | // type |
一种幸福感油然而生,果然科技是第一生产力。
列表按序计数
对于列表项,经常会碰到有顺序的计数,这个时候,如果手工修改,吃力不讨好,且看我们的emmet如何大显神通。
1 | // type |
css的用法
Sublime本身提供的模糊输入已经极大程度的方便了css的输入,因此我没有做过多的研究,感兴趣的同学可以去我提供的参考资料页面自行了解。
小结
对于程序猿来说,效率是一项非常重要的因素,效率高就意味着可以更快的完成任务,并有更多的时间来发现和解决bug(笑,因此选择合适的工具对于我们来说是不可或缺的,这篇博文既是emmet的介绍,也算是对自己的前段时间的感受做一个总结。
最后,吃我一发emmet安利!