Emmet不完全总结

最近看了Emmet文档，此处为不完全总结一下，以后会慢慢充实，与官方文档有较多重合，请勿拍砖。

Emmet在HTML和CSS上面的强大就不再赘述了，本文主要讲述的内容如下：

• 功能

• 语法

• 配置文件

  • preferences.json

  • snippets.json

• 推荐链接

功能

下面罗列的功能并不是 Emmet 全部功能，如需查看全部，请参看推荐链接 Actions 部分

1. 展开缩写：对HTML和CSS均有奇效，鉴于此处内容较多，具体使用见语法部分

2. 向内、向外匹配标签：从插入符处开始选中

3. 在开始和结束标签之间切换

4. 特定内容包裹选中内容

5. 上一个/下一个编辑点：编辑点指的是标签之间、空标签以及缩进的新行

6. 选中上一个/下一个代码： 可选中的包括html标签名、属性及属性值和css的选择器、属性及属性值

7. 切换注释：和其他切换注释的方法不同的是，当没有选中代码时，Emmet 切换当前上下文的注释。对于 HTML 是整个标签内容，对于 CSS 是一条规则或整个属性

8. 删除标签：当占位符在标签上时，删除自身，其余情况删除父标签；自动调整缩进

9. 增减数字：分别以0.1、1和10为单位

语法

• Emmet的语法与css的语法相类似

• Emmet 遇到空格后停止解析缩写，所以请不要使用空格

• 可以在文本的任意位置书写并展开缩写

元素

使用元素的名字，比如 div、 p 来生成 HTML 标签。 Emmet 没有预定义标签集合，所以可以用任意单词来生成对应的标签：

div → <div></div>
foo → <foo></foo>

嵌套操作符

• 子元素： >

div>ul>li

展开为

<div>
    <ul>
        <li></li>
    </ul>
</div>

• 兄弟元素： +

h1>div>p>

展开为

<h1></h1>
<div></div>
<p></p>

• 返回上层： ^

div>h2>p^div

展开为

<div>
    <h2>
        <p></p>
    </h2>
    <div></div>
</div>

该符号也可以连续使用多个，例如：

div>p>span+em^^^bq

展开为

<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

• 乘法： *

div>ul>li\*5

展开为

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

• 分组： ()

该方法可嵌套使用

(div>dl>(dt+dd)*3)+footer>p

展开为

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

属性操作符

• id 和 code

div#header+div.page+div#footer.class1.class2.class3

展开为

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

• 自定义属性

td[title="Hello world!" colspan=3]

展开为

<td title="Hello world!" colspan="3"></td>

需要清楚的是：可以使用单引号或者双引号包裹属性值，甚至属性值如果不包含空格可以省略引号

• 文本： ｛｝

a{Click me}

展开为

<a href="">Click me</a>

配置文件

待填坑...

preferences.json

snippets.json

推荐链接

1. EMMET官方文档

2. EMMET中文文档参考 yanxyz@github

3. Cheat Sheet