atom自定义emmet缩写需创建snippets.json文件并置于~/.atom/snippets.json（windows为%userprofile%.atom\snippets.json），按作用域（如"source.html"）定义键值对，用$1/$2控制跳转，修改后需重置语法模式生效；.jsx/.vue文件需在emmet插件extensions中映射jsx:html或显式添加对应scope。
Atom 本身不支持直接编辑 Emmet 的核心简写规则（比如改 html:5 的输出结构），但可以通过配置自定义缩写（snippets）实现等效效果——关键在于理解「哪里配、怎么配、配完为何不生效」。
如何添加自定义 HTML/CSS 缩写（snippets.json）
Emmet 在 Atom 中的自定义能力依赖于 snippets.json 文件，它允许你定义新缩写或覆盖默认行为。这个文件必须放在 Atom 配置目录下，路径为：~/.atom/snippets.json（macOS/Linux）或 %USERPROFILE%\.atom\snippets.json（Windows）。
- 首次使用需手动创建该文件（Atom 不会自动生成）
- 内容必须是合法 JSON，顶层是对象，每个 key 是作用域（如
"source.html"），value 是键值对：缩写名 → 展开内容 - 展开内容中用
$1、$2表示光标跳转位置，${1:default}可设默认值 - 修改后无需重启 Atom，但已打开的文件需重新触发语法模式（如切换到其他语法再切回 HTML）才生效
例如，在 snippets.json 中添加：
{
"source.html": {
"myheader": "<header class='\"site-header\"'>\n <h1>${1:Title}</h1>\n <p>${2:Subtitle}</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发"><img
src="https://img.php.cn/upload/skill/000/000/081/179033410052138.jpg" alt="PigX UI 前端开发" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发" class="overflowclass">PigX UI 前端开发</a>
<p class="overflowclass">PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>\n</header>"
}
}
保存后，在 HTML 文件中输入 myheader + Tab，就会生成对应结构，并把光标停在第一个占位符上。
为什么自定义缩写在 .jsx 或 .vue 文件里不生效
根本原因是 Emmet 默认只在 source.html、source.css 等原生语法作用域下加载 snippets.json 规则。.jsx 和 .vue 文件通常被识别为 source.js.jsx 或 source.vue，不在默认匹配范围内。
- 解决方法一：在
snippets.json中为对应语法显式声明，比如加上"source.js.jsx"或"source.vue"键 - 解决方法二：更推荐——通过 Emmet 插件设置里的
Extensions字段，把.jsx映射到html作用域（填jsx: html），这样它就自动继承source.html下的所有自定义缩写 - 注意：如果同时用了两种方式，优先级以
snippets.json中最具体的 scope 为准；但Extensions配置更轻量，适合复用现有 HTML 规则
常见失效场景与排查顺序
自定义缩写写完却没反应，90% 问题出在这几个环节，按顺序查比重装插件更快：
- 确认文件当前语法模式正确：右下角显示的是
HTML，不是Plain text或JavaScript—— 否则snippets.json根本不加载 - 检查
snippets.json路径是否准确，文件名不能带空格或扩展名（如snippets.json.txt） - 验证 JSON 格式：用在线工具（如 jsonlint.com）粘贴内容检查是否有逗号遗漏或引号不闭合
- 确认缩写名未与内置规则冲突：比如定义
"div"会导致原生div→<div></div>失效；应避免覆盖基础标签名 - 临时禁用其他可能劫持
Tab的插件（如autocomplete-plus的补全菜单弹出时会拦截）
真正难的不是写规则，而是让 Atom 精确知道「此刻该用哪套规则」——语法作用域、文件扩展名、插件配置三者必须对齐，缺一不可。一旦配通，一个 Tab 就能替代十几行手敲，但错一步就全程静音。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
