Emmet:加快前端开发速度的神器

东明兄 2018-04-11
0条评论 1,790 次浏览
东明兄 2018-04-110条评论 1,790 次浏览

Emmet 用和 CSS 选择器相似的语法来描述元素的嵌套层级关系和属性,实现 HTML/XML/CSS 等代码的智能自动补全。

其通过文件名后缀识别文件类型,从而使用对应的自动补全语法。默认自动补全快捷键为制表符(Tab),使用Emmet能加快开发的速度。

// before
! (或html:5)

//快速输出html通用结构

// after
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

// before
div
demo

//在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准的 HTML 标签。

// after
<div></div>
<demo></demo>

// before
div+p+bq

//使用符号 “+” 生成兄弟元素

// after
<div></div>
<p></p>
<blockquote></blockquote>

注意:Emmet 语法中的空格表示结束解析,所以书写语句中不能出现空格。


快速上手:https://blog.csdn.net/qq_15704535/article/details/40836571


更过请参阅官方文档:https://docs.emmet.io/cheat-sheet/

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注