emmet,让你的html飞起来

发表于:March 12, 2016 at 04:51 PM

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 文档中输入

// 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。

// 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!

// 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 可以帮我们完美解决这个问题。

// type
ul>li*5
// tab
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

加上分组的应用,可以处理更复杂的 html 结构

// 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 如何大显神通。

// 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 个常用的技巧