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
2
3
4
5
6
7
8
9
10
11
12
13
14
| // type
html:5
// tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
|
添加类、id、文本和属性
emmet的一个强大特性，使用类CSS选择器的方式，.是生成类名，#是生成id，{}中生成文本内容，[]中可以设置属性,可以嵌套使用。话不多说，上demo。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| // type
p
// tab
<p></p>
// type
p.bar
// tab
<p class="bar"></p>
// 添加多个类
// type
p.bar1.bar2
// tab
<p class="bar1 bar2"></p>
// type
p#foo
// tab
<p id="foo"></p>
// type
p{123}
// tab
<p>123</p>
// type
input[type=radio]
// tab
<input type="radio">
// type
p.bar#foo{123}
// tab
<p class="bar" id="foo">123</p>
|
嵌套和分组
emmet又一个强大的特性，也是让你写html速度起飞的关键因素。
嵌套语法：
>：子元素符号，表示嵌套的元素
+：同级标签符号
^：可以使该符号前的标签提升一行
其中^用的不多，容易让人逻辑混乱，这个时候就需要良好的分组来实现。翠花，上demo！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| // type
p>span
// tab
<p><span></span></p>
// type
p+span
// tab
<p></p>
<span></span>
// type
p>h1^span
// tab
<p>
<h1></h1>
</p>
<span></span>
// 以分组的方式来实现,更清晰
// type
(p>h1)+span
// tab
<p>
<h1></h1>
</p>
<span></span>
|
重复添加相同元素
写页面的时候经常会遇到很多重复的结构用来显示数据，比如无序列表ul，如果列表项很多，手打就显得效率十分低下，好在emmet可以帮我们完美解决这个问题。
1
2
3
4
5
6
7
8
9
10
| // type
ul>li*5
// tab
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
|
加上分组的应用，可以处理更复杂的html结构
1
2
3
4
5
6
7
8
9
10
11
| // type
(div.warp>p.bar+span#foo)*2
// tab
<div class="warp">
<p class="bar"></p>
<span id="foo"></span>
</div>
<div class="warp">
<p class="bar"></p>
<span id="foo"></span>
</div>
|
一种幸福感油然而生，果然科技是第一生产力。
列表按序计数
对于列表项，经常会碰到有顺序的计数，这个时候，如果手工修改，吃力不讨好，且看我们的emmet如何大显神通。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| // type
ul>li.item$*3
// tab
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
// 如果想要两位数的序号，添加两个$$即可,依此类推
// type
ul>li{item$$}*3
// tab
<ul>
<li>item01</li>
<li>item02</li>
<li>item03</li>
</ul>
|
css的用法
Sublime本身提供的模糊输入已经极大程度的方便了css的输入，因此我没有做过多的研究，感兴趣的同学可以去我提供的参考资料页面自行了解。
小结
对于程序猿来说，效率是一项非常重要的因素，效率高就意味着可以更快的完成任务，并有更多的时间来发现和解决bug(笑，因此选择合适的工具对于我们来说是不可或缺的，这篇博文既是emmet的介绍，也算是对自己的前段时间的感受做一个总结。
最后，吃我一发emmet安利！
参考资料
emmet官网
Emmet：HTML/CSS代码快速编写神器
sublime text 2中Emmet8个常用的技巧