使用Emmet提高前端开发效率

JavaScript
18

使用Emmet提高前端开发效率

author: histonevon@zohomail.com

environment: Visual Studio Code

本文是学习笔记，只介绍简单的功能

一、关于Emmet（来自Wikipedia）

  • Emmet（以前名为Zen Coding）是一套面向文本编辑器的插件，它允许通过内容辅助高速度的编写和编辑HTML、XML、XSL和其他结构化的代码格式。

  • Emmet以MIT许可证开源。

  • Emmet官网

二、Emmet语法

嵌套操作符

  • 嵌套操作符用来生成元素的DOM树中的兄弟节点或子节点

Child：>

  • 使用>生成元素子节点

  • 例如div>ul>li可以被转义成

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

Sinling：+

  • 使用+生成兄弟节点

  • 例如div+p会被转义成

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

Climb-up：^

  • 使用^在元素父节点生成新的节点

  • 例如div>ul>li^p会被转义成

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

  • 用n个^就可以在第n父级生成新的节点

  • div>ul>li>a^^^p

     <div>
     <ul>
         <li><a href="#"></a></li>
     </ul>
 </div>
 <p></p>
 <!--a的父父父级节点是div，在div同级生成p节点-->

Multiplication：*

  • 使用*生成多个相同元素

  • 例如：ul>li*5

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

  • 也可以嵌套

  • ul*3>li*4

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

Grouping：()

  • 圆括号 () 用来实现较复杂的DOM结构

  • div>(ul>li*3>a)+ol>li*2>p

     <div>
     <ul>
         <li>
             <a href=""></a>
         </li>
         <li>
             <a href=""></a>
         </li>
         <li>
             <a href=""></a>
         </li>
     </ul>
     <ol>
         <li>
             <p></p>
         </li>
         <li>
             <p></p>
         </li>
     </ol>
 </div>

  • 圆括号也可以嵌套

属性操作符

id和class

  • Emmet给元素添加id和class的方法与CSS选择器语法类似

  • div#header+div.page*3+div#footer

     <div id="header"></div>
 <div class="page"></div>
 <div class="page"></div>
 <div class="page"></div>
 <div id="footer"></div>

  • 可以混用或多重使用

  • div#id1.class1+div#id2.class2.class3

    <div id="id1" class="class1"></div>
<div id="id2" class="class2 class3"></div>

  • id如果出现多个以最后一个为准

自定义属性

  • 使用 [ ] 来添加自定义属性

  • img[src="Hi" alt="Hello"]

    <img src="Hi" alt="Hello World">

元素编号

  • 使用$操作符可以对重复元素进行有序编号

  • .demo$*5

    <div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

  • ul#a$*3>li.b$*4

    <ul id="a1">
    <li class="b1"></li>
    <li class="b2"></li>
    <li class="b3"></li>
    <li class="b4"></li>
</ul>
<ul id="a2">
    <li class="b1"></li>
    <li class="b2"></li>
    <li class="b3"></li>
    <li class="b4"></li>
</ul>
<ul id="a3">
    <li class="b1"></li>
    <li class="b2"></li>
    <li class="b3"></li>
    <li class="b4"></li>
</ul>

  • 可以用多个$定义编号格式

  • 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>

其他编号方式

  • 通过 @ 符号可以获得其他多样的编号格式

  • 在$后面添加 @- 可以改变编号的顺序，即可以变成倒序（VS code 好像对此支持不好）

  • 在$后面添加 @n 可以改变编号基数

  • div.demo$@3*5

    <div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<div class="demo6"></div>
<div class="demo7"></div>

文本操作符

  • 使用 { } 给元素添加文本内容

  • div{demo}

    <div>demo</div>

  • div{demo$}*5

    <div>demo1</div>
<div>demo2</div>
<div>demo3</div>
<div>demo4</div>
<div>demo5</div>

  • 注意：a{demo} 和 a>{demo} 有相同的结果

    <!-- a{demo} -->
<a href="">demo</a>

<!-- a>{demo} -->
<a href="">demo</a>

  • 但是：a{demo}+p{msg} 和 a>{demo}+p{msg} 结果不同（由于 > 会创建子节点）

     <!-- a{demo}+p{msg} -->
 <a href="">demo</a>
 <p>mag</p>
 ​
 <!-- a>{demo}+p{msg} -->
 <a href="">
     demo
     <p>msg</p>
 </a>