前端开发神器Emmet,让你的代码输入效率瞬间翻倍

你还在一个字符一个字符的敲代码吗?如果是那你就太OUT了,现在什么都流行自动化,当然敲代码也不能落后啊。这款emmet神器,让你的代码输入效率瞬间翻倍!我们还是先看效果图:

paste image

怎么样,是不是很酷,快来学习一下吧。

Emmet,前身是大名鼎鼎的Zen Coding,借助css语法来提高输入html/css代码效率。Emmet作为一款插件被广泛运用在代码编辑器中,如sublime,webstrom,notepad++等都默认安装的有,如果没有可自行百度安装。

基本使用:输入Emmet命令,按Tab键即可。

一、快速生成html代码

1.生成html文档

html文档一般包括<html> <meta> <head> <body>标签等,这些固定标签可以通过Emmet一键生成。

1
2
3
html:5或! 快速生成html5文档
html:xt 快速生成XHTML过渡文档
html:4s 快速生成HTML4严格文档

2.生成html标签

Emmet可以自动补全标签,只需输入尖括号内的标签名然后按下Tab键,一个完整闭合的标签就生成了。另外我们可以使用”>”生成子元素,使用”+”生成同级元素,使用”^”返回上一层父级元素,使用”*”生成重复元素,使用”()”进行组合操作。

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

img
<img src="" alt="">

div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>

h1+h2+h3
<h1></h1>
<h2></h2>
<h3></h3>

div>h1>span^h2
<div>
<h1><span></span></h1>
<h2></h2>
</div>

ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>

3.标签中添加类、id、文本和属性

Emmet使用”#”和”.”来生成id和class属性,使用”[]”进行自定义属性,使用”{}”来定义标签内包含的内容。如果标签是div的话可以直接省略div。

比如输入下面这段,按下Tab键

1
(header>ul>li*2>a)+section>h1+p^footer

运行结果如下:

1
2
3
4
5
6
7
8
9
10
11
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<section>
<h1></h1>
<p></p>
</section>
<footer></footer>

加入属性再试一下

1
div#header{hello}+.content>table.class1.class2>tr>td[title="Hello world!" colspan=3]

1
2
3
4
5
6
7
8
<div id="header">hello</div>
<div class="content">
<table class="class1 class2">
<tr>
<td title="Hello world!" colspan="3"></td>
</tr>
</table>
</div>

4.自动生成编号

Emmet支持自动生成连续的编号,使用”$”符号快速生成相关属性的编号。如果需要生成多位的数字编号,可以组合使用多个”$”符号。如果需要指定反向编号,可以使用”$@-“符号。当然如果输出从某个编号到某个编号也是可以的,自己去探索吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
ul>li.item$$$*3
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
</ul>

ul>li.item$@-*3
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>

二、快速生成css代码

1.快速生成css属性和值

书写css是枯燥无味的事情,Emmet可以帮你简化这个过程。生成的属性值默认是px,当然也可以生成其他单位,那就请记住下面几个符号:

“p”表示”%”,”e”表示”em”,”x”表示”ex”。

1
2
3
4
5
6
7
8
9
ov:h
overflow: hidden;

w100
width: 100px;

h10p+m5e
height: 10%;
margin: 5em;

2.自动添加前缀

css一些属性经常要兼容各个浏览器而添加一大堆后缀,有了Emmet,一切烦恼轻松解决。例如下面生成圆角和渐变,太给力了。

1
2
3
4
5
6
7
8
9
10
11
-bdrs
-webkit-border-radius: ;
-moz-border-radius: ;
-ms-border-radius: ;
-o-border-radius: ;
border-radius: ;

lg(right,#fff 50%,#000)
background-image: -webkit-linear-gradient(right, #fff 50%, #000);
background-image: -o-linear-gradient(right, #fff 50%, #000);
background-image: linear-gradient(to left, #fff 50%, #000);

三、其他功能

在Emmet中可以快速生成占位文字:

1
lorem<Tab键> 或者 lipsum<Tab键>

如果需要生成重复的Dummy文字,可以使用如下命令:

1
p*4>lorem

并且支持模糊输入,如下:

1
ul>lorem25.item*3<Tab>

这里就不贴效果了,自己去体验吧。

四、总结

大概介绍了Emmet的功能,是不能很强大很酷炫!学会之后只需敲入命令就可以瞬间生成一个网页,当然我不建议使用太复杂太长的命令。平常敲代码再也不用输入尖括号了,爽歪歪!赶紧动起手,体验开发的乐趣!

如果喜欢,欢迎订阅收藏,我是竹风,欢迎交流学习!

最后更新:

原始链接: http://wangzc.cc/blog/tools-emmet/