Emmet 终极指南：提升 VS Code 及其他编辑器的前端开发效率
如果您仍然在手动输入每一个 HTML 标签和 CSS 属性，那么您是在费力不讨好。欢迎来到 Emmet 的世界——Web 开发者的终极生产力工具。
Emmet 允许您编写简写表达式，并将其展开为完整的代码块。它内置于 VS Code 中，也可作为插件用于 Sublime Text，并受到几乎所有现代代码编辑器的支持。
在本指南中，我们将探索 Emmet 的强大功能，提供一份必备的速查表，并向您展示如何使用缩写展开器来极大提升您的工作流程。
1. 什么是 Emmet？
Emmet（原名 Zen Coding）是一套用于文本编辑器的插件，它通过内容辅助（Content Assist）实现高速 HTML、XML、XSLT 和 CSS 编码。
其核心思想非常简单：输入一个简写，按下 Tab 键，它就会展开为完整的代码。
示例：
缩写：ul>li*3>a
展开为：
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
2. 为什么需要使用 Emmet 游乐场或缩写展开器？
虽然许多编辑器都内置了 Emmet，但使用在线 Emmet 游乐场 (Emmet Playground) 或 Emmet 缩写展开器 有以下几个显著优势：
- 交互式学习：初学者可以在输入时实时看到展开效果，帮助理解语法逻辑。
- 复杂代码片段测试：如果您要构建一个具有深层嵌套和复杂属性的结构，在将其注入代码库之前，先在游乐场中进行测试会更安全。
- 无需编辑器环境：如果您需要快速生成一段模板代码，但手头没有打开 VS Code 或 Sublime Text，基于 Web 的展开器就是您的最佳选择。
3. Emmet HTML 速查表：核心语法
基础嵌套
>：子节点（例如div>p）+：兄弟节点（例如div+p）^：向上爬升一层（例如div>p^span）*：乘法/重复（例如li*5）
属性与内容
.：类名（例如div.container）#：ID（例如div#main）[]：自定义属性（例如img[src="logo.png" alt="Logo"]）{}：文本内容（例如a{点击我}）$：数字序列（例如li.item$*3会生成item1,item2,item3）
分组
()：将复杂的结构分组（例如div>(header>nav)+footer）
4. Emmet CSS 速查表：极速编写样式
Emmet 不仅适用于 HTML，在编写 CSS 时也异常强大。
| 缩写 | 展开后的 CSS |
|---|---|
m10 |
margin: 10px; |
p10-20 |
padding: 10px 20px; |
db |
display: block; |
df |
display: flex; |
pos:a |
position: absolute; |
bgc |
background-color: #fff; |
fz16 |
font-size: 16px; |
bd+ |
border: 1px solid #000; |
5. 在常用编辑器中配置 Emmet
VS Code
Emmet 默认启用。只需在 .html 或 .css 文件中输入缩写并按 Tab 或 Enter。
提示：您可以通过在设置中添加 "emmet.includeLanguages": { "javascript": "javascriptreact" }，在 React 的 .jsx 文件中启用 Emmet。
Sublime Text
您需要通过 Package Control 安装 Emmet 插件。安装完成后，其用法与 VS Code 类似。
结论：掌控编码流
Emmet 不仅仅是一个节省时间的工具；它改变了您思考代码的方式。您不再关注括号和标签，而是关注文档的结构和层级。
从使用前端生产力游乐场开始练习您的缩写。不出一周，您会发现自己的编码速度达到了前所未有的高度。
Tool3M 上的相关工具
- HTML 实体编解码：使用 Emmet 生成 HTML 后，确保您的特殊字符安全。
- 代码压缩工具：完成编码后，优化代码以用于生产环境。
- Lorem Ipsum 生成器：通过 Emmet 生成的
p*5标签填充示例内容的完美搭档。