【转】VsCode中使用Emmet神器快速编写HTML代码

转载自：https://www.cnblogs.com/summit7ca/p/6944215.html

零、经常使用命令

注释选中的行或光标所在的行　　ctrl+?

1、Emmet简述

Emmet (前身为 Zen Coding) 是一个能大幅度提升前端开发效率的一个工具. 在前端开发的过程当中，一大部分的工做是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，由于须要敲打不少尖括号，并且不少标签都须要闭合标签等。因而，就有了 Emmet，它能够极大的提升代码编写的效率，它提供了一种很是简练的语法规则，而后马上生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码

请注意在VsCode新版本中按Tab再也不默认启用Emmet展开缩写!须要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!

语法基本规则以下:

E 表明HTML标签。
E#id 表明id属性。 E.class 表明class属性。 E[attr=foo] 表明某一个特定属性。 E{foo} 表明标签包含的内容是foo。 E>N 表明N是E的子元素。 E+N 表明N是E的同级元素。 E^N 表明N是E的上级元素。

本文仅介绍了在Html使用Emmet,
若是想Css缩写的语法请参考这里https://docs.emmet.io/css-abbreviations/
---

2、基础用法

• 元素(Elements)
  您可使用元素的名称，如div或p来生成HTML标签。Emmet没有一组可用的标签名称，能够写任何单词并将其转换为标签。也就是只要知道元素的缩写,Emmet会自动转换成对应标签.
  形如:

div => <div> </div> foo => <foo> </foo> html:5 => 将生成html5标准的包含body为空基本dom html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01 a:mail => <a href="mailto:"></a> a:link => <a href="http://"></a> base => <base href=""> br => <br> link => <link rel="stylesheet" href=""> script:src => <script src=""></script> form:get => <form action="" method="get"></form> label => <label for=""></label> input => <input type="text"> inp => <input type="text" name="" id=""> input:hidden => <input type="hidden" name=""> input:h亦可 input:email => <input type="email" name="" id=""> input:password => <input type="password" name="" id=""> input:checkbox => <input type="checkbox" name="" id=""> input:radio => <input type="radio" name="" id=""> select => <select name="" id=""></select> option => <option value=""></option> bq => <blockquote></blockquote> btn => <button></button> btn:s => <button type="submit"></button> btn:r => <button type="reset"></button>

• 文本操做符(Text)
  若是想在生成元素的同时添加文本内容可使用{}

div{这是一段文本}
<div>这是一段文本</div> a{点我点我} <a href="">点我点我</a> 

• 属性操做符(Attribute operators)
  属性运算符用于修改输出元素的属性.
  • Id和Class (elem#id and elem.class )

  div.test  => <div class="test"></div> div#pageId => <div id="pageId"></div>

  隐式标签则会自动联想生成对应元素,根据配置规则不一样生成的结果也是不一样的.

  .class
  =>
  <div class></div> em>.class => <em><span class></span></em> table>.row>.col => <table> <tr class="row"> <td class="col"></td> </tr> </table>

  绑定多个类名用.符号连续起来便可

  div.test1.test2.test3
  =>
  <div class="test1 test2 test3"></div>

  • 自定义属性使用 [attr1='' attr2='']

  a[href='#' data-title='customer' target='_blank'] => <a href="#" data-title="customer" target="_blank"></a>

• 嵌套操做符(Nesting operators)
  嵌套操做符用于将缩写元素放置在生成的树中,是否应放置在上下文元素的内部或附近.
  • 子级:>
    经过>标识元素能够生成嵌套子级元素,能够配合元素属性进行连写
    div#pageId>ul>li => <div id="pageId"> <ul> <li></li> </ul> </div>
  • 同级:+
    +字符表示生成兄弟级元素.
    div#pageId+div.child => <div id="pageId"></div> <div class="child"></div>
  • 父级:^
    ^用于生成父级元素的同级元素,从这个^字符所在位置开始,查找左侧最近的元素的父级元素并生成其兄弟级元素.
    div>p.parent>span.child^ul.brother>li => <div> <p class="parent"><span class="child"></span></p> <ul class="brother"> <li></li> </ul> </div>
• 分组操做符(Grouping)
  分组使用()来实现缩写的分离.好比这个例子,若是不加括号那么a将做为span的子级元素生成.加上括号a将于()内的元素同级.

div>(ul>li+span)>a => <div> <ul> <li></li> <span></span> </ul> <a href=""></a> </div>

• 乘法(Multiplication)
  使用N便可自动生成重复项.N是一个正整数.在使用时请注意N所在位置,位置不一样生成的结果不一样.

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

• 自动计数(numbering)
  这个功能挺方便的对于生成重复项时增长一个序号,只须要加上$符号便可.

ul>li.item${item number:$}*3
<ul> <li class="item1">item number:1</li> <li class="item2">item number:2</li> <li class="item3">item number:3</li> </ul>

若是生成两位数则使用两个连续的$$,更多位数以此类推...
使用@修饰符，能够更改编号方向（升序或降序）和基数（例如起始值）.注意这个操做符在$以后添加
@-表示降序,@+表示升序,默认使用升序.
@N能够改变起始值.须要注意的是若是配合升降序使用的话N是放到+-符后.

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

上述的操做是能够搭配使用进而得出酷炫的效果,使用时请注意空格的问题,缩写代码不要有空格不然是不会进行转换的.
另外若是你的编辑器中已经有了一些html智能提示代码段,好比个人VsCode还装了HTML Snippets插件,这个与Emmet语法有部分冲突,使用Tab键时会优先使用插件的代码提示,建议禁用.
组合起来看看效果:

table.table-row[role='table']>(thead>tr>td{item $@120}*5)+(tbody>tr>(td.item$$@-)lorem10*5)

这段目的在于生成一个类名为table-row,且自定义了属性role的table标签,内部包含了thead与tbody,分别生成5个td.
thead中td的内容是item加上自增序号,自增序号基数从120开始.
tbody中td拥有一个名为item加降序自增符号类名,且每一个td内容随机填充10个单词.

<table class="table-row" role="table"> <thead> <tr> <td>item 120</td> <td>item 121</td> <td>item 122</td> <td>item 123</td> <td>item 124</td> </tr> </thead> <tbody> <tr> <td> <td class="item05">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, assumenda.</td> </td> <td> <td class="item04">Magnam possimus molestias ipsum animi rem placeat, ut obcaecati laudantium.</td> </td> <td> <td class="item03">Consequuntur, labore ad optio cupiditate iusto dolores fugit quidem officiis.</td> </td> <td> <td class="item02">Veniam, explicabo consequuntur blanditiis at dicta fuga ratione eos beatae.</td> </td> <td> <td class="item01">Fuga voluptatum illo quis ducimus ad eveniet non. Saepe, eveniet.</td> </td> </tr> </tbody> </table>

再来个配合嵌套元素和计数的大栗子.

div.nav>(nav#navbar>(ul>li>(a[href="/xxx/product/$" data-index=$]>lorem4)*5))+div.btn[type='button']>span{--}^^div#main 

这个有点复杂,看下效果:

<div class="nav"> <nav id="navbar"> <ul> <li> <a href="/xxx/product/1" data-index="1">Lorem ipsum dolor sit.</a> <a href="/xxx/product/2" data-index="2">Dolor vel, quia quas.</a> <a href="/xxx/product/3" data-index="3">Qui hic, corrupti eum!</a> <a href="/xxx/product/4" data-index="4">Necessitatibus perspiciatis, corrupti. Praesentium!</a> <a href="/xxx/product/5" data-index="5">Nostrum quos, voluptate. Velit!</a> </li> </ul> </nav> <div class="btn" type="button"><span>--</span></div> </div> <div id="main"></div>

3、进阶高级用法

• 模拟文本/随机文本
  在开发时常常要填充一些文本内容占位,Emmet内置了Lorem Ipsum功能来实现.loremN或者lipsumN,N表示生成的单词数,正整数.能够不填.

lorem
=> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quia commodi vero sint omnis fugiat excepturi reiciendis necessitatibus totam asperiores, delectus saepe nulla consequuntur nostrum! Saepe suscipit recusandae repellendus assumenda.

p>lorem4
=>
<p>Lorem ipsum dolor sit.</p> (p>lorem4)*3 => <p>Lorem ipsum dolor sit.</p> <p>Labore aperiam, consequuntur architecto.</p> <p>Quidem nisi, cum odio!</p>

• 包装文本
  听起来可能有点绕,通俗点解释就是把一段指定的文本包装成咱们想要的结构.注意这个功能须要编辑器的支持,举个大栗子:
  好比PM给了这样一段文本

首页
产品介绍
相关案例
关于咱们
联系咱们
而咱们预期的效果是这样
<nav> <ul> <li>首页</li> <li>产品介绍</li> <li>相关案例</li> <li>关于咱们</li> <li>联系咱们</li> </ul> </nav>

1. 选中文本,按下ctrl+shift+p打开命令窗口输入ewrap
2. 选择Emmet:使用缩写进行包装(Wrap with Abbreviation)选项
   

3. 输入缩写字符nav>ul>li*按下回车键便可看到效果.
   固然也能够在菜单=>编辑=>Emmet(M)..而后输入.

   这里须要的注意的地方是输入的缩写代码中*所在位置不一样获得的效果也是不一样的.

另外若是给的文本带有序号的状况,咱们也是能够经过缩写来处理,而不是手动删除,主要用的是|t来处理.
好比:

1.首页
    2.产品介绍
    3.相关案例
    4.关于咱们
    5.联系咱们
    输入包装字符命令
    nav>ul>li*|t
    便可看到生成的html中自动去掉了序号

针对上边说的几种状况来演示一下.
利用好Emmet来快速编写html代码,能提高工做效率不用在一个个敲闭合标签,简直是我等偷懒党神器.赶快去耍耍吧.