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

东明兄 • 2018-04-11 • 开发笔记 • 2151 阅读
chat

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/

版权声明：
作者：东明兄
链接：https://blog.crazyming.com/note/409/
来源：CrazyMing
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
Emmet:加快前端开发速度的神器
Emmet 用和 CSS 选择器相似的语法来描述元素的嵌套层级关系和属性，实现 HTML/XML/CSS 等代码的智能自动补全。
<<上一篇
下一篇>>
chat