痛点
在日常的前端开发中，不管我们是使用React，Vue之类对框架，还是使用传统的一些开发方式，我们都无法避免要写一些原生html或者css的代码。而码html/css的代码有时候会很繁琐，需要频繁的移动光标，或者类似于表格之类的，就需要来回粘贴复制，可以说十分不优雅了。而要避免这些痛点，或者emmet是一个不错的选择。
Emmet是个啥
emmet的官网介绍是：the essential toolkit for web-developers，从官方的介绍也能看出这可能是一个很不错的工具，但是到底是不是官方吹牛呢？让我们一看究竟。
假如现在有这样一个场景：某一个需求需要绘制一个3行4列的表格，并且每一行具有row[x]的类名，每一列具有col[x]的类名，其中[x]表示第几行第几列。大概代码如下：
<table>
<tr class="row1">
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr>
<tr class="row2">
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr>
<tr class="row3">
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr>
</table>
通常，如果不借助emmet，我可能会先把table那一层写出来，然后是第一个tr和td，然后就开始不断的复制粘贴，然后慢慢改类名。但是借助emmet，我们写需要写下一面这一行就够了：
table>(tr.row$>td.col$*4)*3
是不是很简洁，比之前的方法要高效很多倍。
Emmet怎么用
对于emmet的好处，相信上面一个简单的例子已经可以体会得到。那现在就讲讲emmet要如何使用。
安装
emmet已经很很多编辑器很好的结合起来，所以其实几乎无需配置就可以使用，例如vscode，webstorm本身就支持emmet语法，如果你使用的编辑器没有默认支持，可以查看官网下载页下载对应的插件
基本语法
emmet的本质其实就是一些有一定语法规则代码片段，只要了解它的语法就可以掌握它，很容易学习。
单个标签
- 标签：可以使用标签的名字来生成对应的标签。例如只需要写
div，然后按Tab键（笔者使用的是vscode，默认按Tab键就可以生成代码，各位的快捷键需要以个人编辑器为准），就可以生成<div></div> - Class：使用
.代表标签的class。例如div.class即可生成<div class="class"></div>；可以设置多个class，例如div.class1.class2即可生成<div class="class1 class2"></div> - ID：使用
#代表标签的id。例如div#id即可生成<div id="id"></div>；需要注意的是id设置多个时，主要取最后一个，例如div#id1#id2只会生成<div id="id2"></div> - 属性：使用
[]代表标签属性。例如div[name=name]即可生成<div name="name"></div>；对于多个属性，属性间以空格间隔，例如div[name=name title=title]即可生成<div name="name" title="title"></div> - 内容：使用
{}代表标签所包含的内容。例如div{it is a div}即可生成<div>it is a div</div>
多个标签
- 父子关系：使用
>来代表标签之间的层级，例如：table>tr>td会生成如下结构：
<table>
<tr>
<td></td>
</tr>
</table>
- 兄弟关系：使用
+表示标签之间处于同一级，例如：div+p+div会生成如下结构：
<div></div>
<p></p>
<div></div>
- 上一级：使用
^表示回到上一级，常见于与>一起使用，例如：ul>li^div会生成如下结构：
<ul>
<li></li>
</ul>
<div></div>
^也可以多个连续使用，用于提升多个层级，例如：div>div>p>span^^^div会生成如下结构：
<div>
<div>
<p><span></span></p>
</div>
</div>
<div></div>
高级用法
- 分组：使用
()可以对复杂的结构分组，例如：div>(header>ul>li)+footer>p会生成如下结构：
<div>
<header>
<ul>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
- 乘法运算：使用
*可以进行乘法运算，顾名思义就是用于生成多以相似的结构，例如ul>li*5会生成如下结构：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
- 计数器：使用
$可以标签计数，这个功能与*结合对于按顺序生成属性名尤其有用，例如ul>li.item$*5会生成如下结构：
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
如果要生成多位数字，则使用多个$即可，如果想生成3位数，则可以使用ul>li.item$$$*5，即可生成：
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
除此之外，还可以使用@改变排序方式以及起始值，具体的规则就是$@[+/-][number]，其中[+/-]代表排序方式，+代表升序（默认排序方式），-代表降序；[number]代表起始值。
例如`ul>li.item$@-*5``会生成如下结构：
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
如果带上初始值，如ul>li.item$@10*5会生成如下结构：
<ul>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
<li class="item13"></li>
<li class="item14"></li>
</ul>
- 自动标签补全：在我们写有明确层级关系的标签时，emmet可以根据我们写的层级关系，自动为我们补全对应的结构，如
table>.row>.col会生成如下结构：
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
如果我们默认只写
.class会默认补全为<div class="class"></div>
由于有了自动补全，其实我们还可以把之前的第一个表格例子再进一步简化成为：table>(.row$>.col$*4)*3
- 内容填充：在写标签时，有时需要填入一些内容来看效果，除了胡乱一通敲键盘之外，emmet也提供了填充机制，使用
lorem来进行内容填充，如果div>lorem会生成如下结构：
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos eaque exercitationem a inventore. Recusandae repellendus provident sit ad corporis ut enim vel dolor. Voluptas incidunt magni similique, earum aspernatur provident.</div>
lorem还可以指定填充多少个单词，如lorem100表示填充100个单词。
到此为止就是emmet的语法了，有没有很简单，极低的学习成本就可以得到极高的效率。
不止于此
emmet不仅可以在标签书写时提供好用的语法，对于常用的一些固定格式的标签也提供了大量的代码片段。
对于html。如a:link可以生成<a href="http://"></a>，如input:number可以生成<input type="number" name="" id="" />......
对于css。如bg可以生成：background:#000;，如bd+可以生成border:1px solid #000;......
完整的代码片段请查看Cheat Sheet
叨叨叨
emmet虽然能增加效率，但是无疑也需要时间学习和熟悉。毕竟现在要学的东西已经够多了，导致有些同学一看到又要学新东西就头疼。但生命不息，折腾不止，希望大家可以试着玩玩emmet这个小玩意。
如果对本文有什么意见和建议，欢迎讨论和指正！！！
网友评论