前端效率篇之Emmet

前言： 自从换上了Visal Studio Code后，爱不释手， 主要还是相对于IDE而言比较的是轻便，其实在开发过程中，很多的功能不是很需要。特别是在开发网页中就不的不提一下Emmet插件了。之前没有怎么好好看，最近前端网页写的比较多，稍微学了一下Emmet发现效率大增。我目前的主力编辑器还是Visal Studio Code，这款编辑器内置了Emmet，所以不需要安装任何插件，如果你使用的是Atom或者Sublime Line可以需要配置一下。

语法

所有的Emmet的出发都是快捷键的Tab，所以在使用上了Emmet后的场景通常是需要编写缩写标签后疯狂按Tab。

首先我们从一个HTML网页开始吧，目前所有的网页基本上都是H5页面，所以我们使用Emmet可以非常快捷的生成H5页面架子， 所需要做 html5 然后按下回车即可（仅在VS code中）。

子元素操作符: >

所有的元素都是靠近的，中间不能有空格。

div>ul>li

展开后表示

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

相近元素操作符：+

+号表示所有的元素都是在同一级

div+p+bq

展开后表示

<div></div>
<p></p>
<blockquote></blockquote>

父元素操作符：^

因为 + > 操作符都是向下，所以如果要相对当前曾经向上一级可以使用^

div+div>p>span+em^bq

展开后表示

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

乘法操作符： *

使用 * 可以让元素重复输出

ul>li*5

展开后表示

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

括号操作符:（）

使用括号来讲一些元素 放在一起来操作

 div>(header>ul>(li>a)*2)+footer>p 

展开后表示为

   <div>
       <header>
           <ul>
               <li><a href=""></a></li>
               <li><a href=""></a></li>
           </ul>
       </header>
       <footer>
           <p></p>
       </footer>
   </div> 

ID 和class操作符

通过Emmet也可以很方便的给标签赋予 ID和class

div#header+div.page+div#footer.class1.class2.class3

展开后表示

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

重复数字操作符: $

$ 可以和 * 配合快速给 大量的标签起名 每一个$表示一个数字占位符

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>

字符操作符: {}

通过使用大括号 还给标签内部的字符串复制

a{Click me}

展开后表示

<a href = ""> Click me </a>