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

一、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/
---

二、基础用法

• 元素(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>

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

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

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>

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>

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

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

三、进阶高级用法

• 模拟文本/随机文本
  在开发时经常要填充一些文本内容占位,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代码,能提升工作效率不用在一个个敲闭合标签,简直是我等偷懒党神器.赶快去耍耍吧.

文章来源:https://blog.csdn.net/u013040887/article/details/79681867#t1