本文介绍Emmet插件如何提升VSCode中HTML和CSS的编码效率，包括使用缩写快速生成HTML5模板、标签、嵌套和平行展开、文本插入及序列号展开等技巧。
Emmet是用于高效地编码HTML和CSS的插件，可用于各种编辑器和IDE（集成开发环境），例如SublimeText，Dreamweaver，Bracket，Atom。下面将说明如何将Emmet与Visual Studio Code一起使用。
将Emmet与VS Code一起使用
VSCode在默认情况下已经自带了Emmet插件。
使用VSCode创建一个HTML文件，输入html，将会显示如下图的智能提示
使用上下键选择html:5,然后按Tab键，Emmet会为你生成如下html5文档摸板。
如果按Tab键不生效，或者希望改变<html lang="en">的语言选项，可以添加一些设置。
可以在【文件】【首选项】【设置】，然后选择希望设置的范围（用户，工作区，文件夹），在设置搜索框中输入emmet,会显示所有相关选项。
选中以下选项会使tab键生效
更改以下选项可以改变<html lang="en">的语言。
Emmet常见缩写
HTML5模板
输入html:5或者!，按Tab键，会生成HTML5模板。
普通HTML标签
输入标签名字会自动生成该标签的html代码，例如
输入h1，<h1></h1>将被展开。输入img，<img src="" alt="">将被展开。
使用class或id
像CSS一样,使用.和#展开时,会追加class和id,例如h1#logo+Tab键展开<h1 id="logo"></h1>。不指定任何HTML标签，只输入class或id时，会自动变成div标签，例如.wrapper+Tab键展开<div class="wrapper"></div>。
嵌套展开多个HTML标签
如果用>将多个HTML标签连接在一起，例如header>nav，它们将以嵌套方式展开。 header>nav看起来像这样：
平行展开多个HTML标签
使用+进行连接,可以将多个HTML标记彼此平行的展开。 例如header+main+footer看起来像这样：
插入文本
如果将文本用{}括起来，例如h1{Hello Emmet!}，则文本将像<h1> Hello Emmet!</ H1>一样展开。
模拟文本
用lorem+Tab键可产生一些模拟文本。
重复展开
像ul>li*3这样，如果输入一个带有*N的数字，它将被重复展开。
带序列号展开
像ul>li#hoge$*3这样，如果将$添加到要序列化的ID或类中，则该部分将被序列化。
扫一扫
3537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
