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或类中,则该部分将被序列化。