还在慢慢码Html/Css吗？或许可以试试Emmet

2019-03-24 本文已影响5人 AHOhhhh

痛点

在日常的前端开发中，不管我们是使用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这个小玩意。

如果对本文有什么意见和建议，欢迎讨论和指正！！！