Atom中Emmet需重启并设HTML语法后按Tab才生效：装emmetio官方插件→重启→右下角切HTML→输div.test按Tab变<div class="test"></div>，否则手动调Emmet: Expand Abbreviation验证。
Atom 里 Emmet 不是装完就能用，关键卡点就两个：语法模式没设对、Tab 键没按对——其他问题基本都从这儿衍生。
怎么确认 Emmet 已真正启用
装完 emmet 插件（作者 emmetio，不是 emmet-snippets-compatibility）后必须重启 Atom，否则插件只加载一半。重启后打开一个新文件，右下角手动切到 HTML 语法，输入 div.test，光标停在末尾，按 Tab：
- 成功：变成
<div class="test"></div> - 失败：文本原样不动 → 打开命令面板（
Ctrl+Shift+P/Cmd+Shift+P），搜Emmet: Expand Abbreviation手动触发一次；报错Cannot read property 'expand' of undefined就说明插件根本没初始化，检查~/.atom/packages/emmet目录是否存在且非空
为什么 div>ul>li*3 按 Tab 没反应
最常见原因不是插件坏了，而是当前上下文不满足 Emmet 触发条件：
- 文件语法不是
HTML（新建文件默认是Plain text，右下角点一下切换，或按Ctrl+Shift+L输入html回车） - 光标不在行首或标签内空白处：比如写在 JS 字符串里、
<script>块中、已有 HTML 标签的属性值里，Emmet 会静默忽略 - 缩写后有空格或换行：
p{Click me}✅，p {Click me}❌（大括号前不能有空格） - 被其他插件劫持了
Tab：比如autocomplete-plus弹出补全菜单时会拦截，临时关掉非必要插件再试
如何在 .jsx 或 .vue 文件里用 Emmet
默认只认 .html 和 .css，JSX/Vue 需两步配置：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 进
Atom → Preferences → Packages → emmet → Settings，找到Extensions输入框，填：jsx: jsx, vue: html - 改完不用重启，但得重新打开文件，或手动切一次语法模式（比如从
JavaScript切成React JSX）才会生效 - 如果还无效，检查
keymap.cson是否漏配快捷键：追加这段（别覆盖原文件）：'.source.js, .source.jsx':\n 'tab': 'emmet:expand-abbreviation'
常用但容易写错的 Emmet 缩写写法
语法看着简单，几个细节一错就展开失败：
-
style属性必须用{}包裹且紧贴前面结构：div[style=margin:10px]❌，div{style="margin:10px"}✅（注意引号） - 生成 HTML5 模板用
!或html:5，不是html5；!必须在行首，且按Tab，不是Enter -
ul>li*3生成三个<li></li>，要带序号得写ul>li.item${Item $}*3 - 嵌套分组用括号：
(.header>h1)+(.main>p)，括号外不能有空格，否则解析失败
Atom 的 Emmet 行为比 VS Code 更依赖语法上下文和光标位置，右下角那个小标签多看一眼，能省掉大部分排查时间——它不报错，只是沉默不响应，这点最容易让人反复怀疑插件本身。
