Atom 的 Emmet 插件默认启用但常失效，主因是 tab 触发条件未满足：光标须在行尾、文件类型需为 HTML/CSS、无插件冲突、缩写语法正确；CSS 缩写仅在声明值位置生效；需手动启用自动缩进与换行；!+tab 生成 HTML5 模板需确保文件类型为 HTML 且 snippets 启用。
Atom 自带的 Emmet 插件默认已启用，但多数人写不出预期缩写效果，根本原因是 tab 键触发机制被其他插件干扰，或缩写语法写错——不是插件没装好，而是触发条件没满足。
为什么 div.container 按 tab 没反应？
Emmet 在 Atom 中依赖 tab 键展开，但以下情况会直接失效：
- 光标不在行尾（比如后面还有空格或字符），
tab会缩进而非展开 - 当前文件未被识别为
html或css类型（右下角显示Plain text时 Emmet 不工作） -
emerald-emmet或atom-emmet被禁用，或与autocomplete-plus冲突（常见于较新 Atom 版本） - 输入了非法缩写，例如
.class#id（顺序错误，应为#id.class）
ul>li*3 展开后没有自动换行和缩进？
Atom 默认不开启 Emmet 的格式化行为，需手动配置。展开后代码是扁平的，比如：ul>li*3 → <ul>
<li>
<li>
<li>
</ul>，不换行也不缩进。
解决方法：打开 Atom > Preferences > Packages，搜索 emmet，点击设置，在 Options 区域勾选：
立即学习“前端免费学习笔记（深入）”；
Enable auto-indentation after expanding-
Enable auto-wrap（对 CSS 缩写如m10生效）
也可在 config.cson 中加一行："emmet": {"autoIndentAfterExpand": true}
CSS 缩写如 m10、dib 不生效？
CSS 缩写只在 .css 文件或 <style></style> 块内有效，且必须处于声明值位置（即冒号后）。常见误用：
- 在 HTML 文件里直接写
m10（没用，得进<style></style>或 .css 文件） - 写成
margin: m10（错误，应写margin: 10px;后按tab，或直接输入m10再按tab） -
bd1-s展开为border: 1px solid #000;，但颜色不可配——Emmet 默认用黑，想改需在emmet-user-config.json里设"variables": {"color": "#333"}
如何让 !+tab 生成完整 HTML5 模板？
! 是 Emmet 的文档模板缩写，但 Atom 默认不绑定到 tab，需确认是否启用 snippets 支持：
- 确保文件类型是
HTML（右下角显示HTML） - 输入
!，不要回车，直接按tab - 若仍无效，检查
Atom > Snippets是否被禁用；或手动在snippets.cson加：'text.html.basic': {'!': {'prefix': '!', 'body': '\n\n\n <meta charset="UTF-8">\n <title>${1:Document}</title>\n\n\n $2\n\n'}}
复杂缩写如 section#main>(header>h1{Title}+nav>ul>li*3>a{Item $1})+main>p*2+footer 一次展开几十行，但括号嵌套层级一错就中断——这种长链建议分段写、逐层 tab，别贪快。
