一、概述
Emmet的前身是Zen coding，是一款用于快速生成HTML或CSS代码的插件，可用于绝大多数主流文本编辑器。它的语法类似于CSS选择器，通过使用元素或属性的缩写，大大提高了HTML和CSS的编写速度，从而大幅度提高前端开发的效率。
二、HTML
1、初始模板
输入：!或html:5，然后按Tab键，自动生成HTML文档的初始模板。
2、元素
输入：元素名 + # + id名，自动生成带id属性的元素标签。
用例：p#id-prop
输入：元素名 + . + class名，自动生成带class属性的元素标签。
用例：p.class-prop
输入：元素名 + # + id名 + . + class名，可以实现链式操作。
用例：p#id-prop.class-prop
输入：元素名 + {} + 元素内容，自动生成带内容的元素标签。
用例：p{content}
输入：元素名 + [] + 属性名=属性值，自动生成带属性的元素标签。
用例：img[src=example.jpg]
3、嵌套
输入：父元素名 + > + 子元素名，实现父子关系的元素标签。
用例：div>p
输入：元素名 + + + 元素名，实现同级的元素标签。
用例：h1+h2
输入：元素名 + ^ + 元素名，实现符号前的元素标签提升一行。
用例：div>p^span
4、分组
输入：() + 元素名，实现元素标签的分组。
用例：(div>h1)+(div>h2)
5、隐式标签
根据父元素标签，自动判断子元素标签。
- li：用于ul和ol中
- tr：用于table中
- td：用于tr中
- option：用于select中
6、迭代
输入：元素名 + * + 数字，实现元素标签的多次迭代。
用例：ul>li*3
输入：属性值 + * + 数字，实现元素属性值的多次迭代。
用例：ul>li.item$*3
三、CSS
1、属性值
输入：属性缩写 + 属性值，自动生成带有属性值的元素属性。
用例：w100
输入：属性缩写 + 属性值 + 单位，自动生成指定单位的属性值的元素属性。
用例：h10p
2、附加属性
输入：元素缩写，自动生成元素及其主要属性。
用例：@f
输入：元素缩写 + +，自动生成元素的附加属性。
用例：@f+
3、匹配
输入：元素缩写，自动匹配最接近的元素语法。
用例：ov
4、前缀
如果使用非w3c标准的CSS属性，自动添加供应商前缀。
用例：trs
输入：- + 前缀缩写，指定特定的前缀。
用例：-w-trs
四、定制
- snippets.json：添加或修改缩写
- preferences.json：更改过滤器和操作的行为
- syntaxProfiles.json：定义如何生成HTML或XML代码
参考文章：
网友评论