Visual Studio Code 使用指南(04)使用Emmet简化HTML编码

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

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值