在Atom编辑器里安装与使用Emmet插件的技巧

90%的Emmet Tab无效问题源于语法未切为HTML、Tab被其他插件劫持或安装了错误插件；须安装作者emmetio、包名emmet的2.4.x版，重启Atom，右下角设为HTML，光标置行尾，输入缩写后按Tab展开。

装了插件但缩写按 Tab 没反应？不是插件坏了，而是语法没切对、Tab 被劫持、或根本没装对包——90% 的问题卡在这三步。

怎么确认装的是正确版本的 Emmet 插件

Atom 自带的插件市场里搜 emmet，会出现一堆名字相似的包：emmet-snippets-compatibility、emmet-atom、emmet-jsx……全别碰。只认准一个：

• 作者是 emmetio
• 包名就是 emmet
• 当前最新稳定版为 2.4.x

装完必须重启 Atom——不重启，emmet:expand-abbreviation 命令压根不会注册进命令面板，Tab 键也绑定不上。

为什么输入缩写后按 Tab 没反应

常见原因不是配置错，而是上下文不满足触发条件：

• 文件语法是 Plain text（新建文件默认状态），右下角手动点成 HTML 或用快捷键 Ctrl+Shift+L（Win/Linux）/Cmd+Shift+L（Mac）搜 html 回车
• 光标不在行首或标签内容区：比如写在 JS 字符串里 const html = "div>p";，或嵌套在已有 HTML 标签内部，Emmet 会静默忽略
• Tab 被 autocomplete-plus 等插件截走：临时禁用非必要插件再试一次，能快速定位
• 缩写里有空格：p {Hello} ❌，必须写成 p{Hello} ✅，大括号紧贴前面结构

如何在 .jsx 或 .vue 文件里用 Emmet

默认只响应 .html 和 .css，想在 .jsx 或 .vue 中展开，得两步走：

• 进 Preferences → Packages → emmet → Settings，找到 Extensions 输入框，填入：jsx: jsx, vue: html
• 编辑 keymap.cson（通过 Atom → Keymap… 打开），追加：

  '.source.js, .source.jsx':  'tab': 'emmet:expand-abbreviation''.source.vue':  'tab': 'emmet:expand-abbreviation'

改完不用重启，但得重新打开文件或切换一次语法模式才生效。

容易被忽略的细节

Emmet 对光标位置极其敏感——它只在空行、行首、或 <style> 块内（且该块被识别为 CSS 语法）才工作；<script> 里写的缩写永远不会展开。另外，Enter 键不能替代 Tab，这是硬编码行为，改不了。缩写中含空格、换行、或嵌套在注释里，都会直接失效，不会报错，只会静默忽略。