一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情

Emmet

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具

在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低.
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生成相应代码

HTML补全

! 和 html:5

!和html:5 可以快速生成完整结构的html5代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

> (子代)

<!--
  emmet语法在书写简写的时候，不要在简写中添加空格，否则emmet语法会失效
  emment语法如果是直接将简写复制过来，其也会失效
-->
<!-- ul>li -->
<ul>
  <li></li>
</ul>

+ (兄弟)

<!-- h2+p -->
<h2></h2>
<p></p>

* (个数)

<!-- ul>li*5 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

^(上一级)

<!-- ul>li*3^p -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
<p></p>

( ) (分组)

<!-- div+(p>span)+h2 -->
<div></div>
<p><span></span></p>
<h2></h2>

属性

普通属性

<!-- 
	div[title=foo] 等价于 div[title="foo"]
-->
<div title="foo"></div>

id属性

<!-- div#box -->
<div id="box"></div>

class属性

<!-- div.foo -->
<div class="foo"></div>

{ } (内容)

<!-- ul>li{内容}*5 -->
<ul>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
</ul>

<!-- a[href="https://www.google.com"]{google一下} -->
<a href="https://www.google.com">google一下</a>

$ (数字)

$的起始数字是从1开始递增的

<!-- ul>li{内容$}*5 -->
<ul>
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
  <li>内容4</li>
  <li>内容5</li>
</ul>

<!-- ul>li{内容$$$}*5 -->
<ul>
  <li>内容001</li>
  <li>内容002</li>
  <li>内容003</li>
  <li>内容004</li>
  <li>内容005</li>
</ul>

隐式标签

<!-- .foo --- 默认情况下省略标签的情况下，默认标签就是div标签 -->
<div class="foo"></div>

<!--
  ul>.item --- 在某些特定情况下，emmet会自动识别并使用最合适的那个标签进行补全
-->
<ul>
  <li class="item"></li>
</ul>

CSS补全

.box {
  /* w300 */
  width: 300px;
  /* h300 */
  height: 300px;
  /* fz12 */
  font-size: 12px;
  /* dib */
  display: inline-block;
  /* bd */
  border: 1px solid #000;
  /* pt10 */
  padding-top: 10px;
  /* m10-20-30=40 */
  margin: 10px 20px 30px 40px;
  /*  ......  */
}

.box {
  /* w100+h100+bd+m10 */
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  margin: 10px;
}

emmet中对于html和css的代码补全方式，还有很多，具体可以通过emmet的官方文档进行查阅

lorem

Lorem ipsum是指一篇常用于排版设计领域的拉丁文文章，主要的目的生成一段无意义的测试文本，从而测试文章或文字在不同字型、版型下看起来的效果

Lorem ipsum从西元15世纪开始就被广泛地使用在西方的印刷、设计领域中，在电脑排版盛行之后，这段被传统印刷产业使用几百年的无意义文字又再度流行。由于这段文字以“Lorem ipsum”起头，并且常被用于标题的测试中，所以一般称为Lorem ipsum，简称为Lipsum。

和Emmet语言的简写一样，lorem 短语需要手动输入，复制粘贴不会触发编辑器的 Emmet 识别；在输入后，编辑器出现 Emmet 快捷提示，按回车即可

基本使用

lorem + Tab/Enter

默认情况下，输入lorem + Tab/Enter会生成一个30个词语的句子

<!-- lorem -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae esse at cum aliquid, voluptate mollitia enim totam? Laudantium aliquam exercitationem reprehenderit saepe veniam, alias cumque architecto dignissimos ullam recusandae provident.

生成指定数量的单词

loremN --- N是一个数字 --- N表示的是单词的个数，不是字符的个数

<!-- lorem10 -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, consectetur.

生成指定行数的句子

lorem*N --- 其中 N 是一个数字，代表有 N 行

<!-- lorem*3-->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nihil sunt voluptatum. Recusandae nihil similique magnam tempore distinctio nobis illum natus impedit ut quod? Tempore accusamus soluta repellat enim. Atque?
Debitis ratione voluptas ipsa quos sed eum atque explicabo, impedit laborum cum itaque ducimus, officia accusamus possimus eius, aperiam reiciendis eaque? Veritatis corporis dicta exercitationem autem fuga impedit voluptates tempore?
Officia tenetur vel eum mollitia ex quasi? Repellat itaque facere alias fugit eveniet quia molestiae at quos, odit deleniti cum perferendis non amet, ipsam, ducimus odio nostrum obcaecati est quae!

<!-- lorem10*3 --- 生成3行测试文本，每行文本单词数为10个单词 -->
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum, animi.
Fugit, laboriosam facere voluptatum voluptas architecto odio hic eveniet quibusdam.
Molestias, saepe unde in voluptatum eos animi et quis asperiores?

Emmet语法 和 lorem