Atom 的 HTML 编辑需精简配置：仅装 emerald-html、autocomplete-html、atom-html-preview 三插件；路径补全限根目录一级；实时刷新须用 live-server 并禁用 atom-html-preview。
Atom 编辑器本身不内置 HTML 实时预览或智能补全，所谓“HTML 编辑入门”本质是配置几个关键插件 + 调整基础设置，否则写 index.html 和用记事本没区别。
装什么插件才真正有用
Atom 的 HTML 支持靠插件拼凑，但多数人一上来就装一堆，结果卡顿、冲突、补全错乱。只留这三个核心：
-
emerald-html（轻量级语法高亮，比默认的language-html更准，尤其对自定义标签和模板字符串） -
autocomplete-html（补全原生标签和属性，注意：它不补全 Vue/React 的 JSX，别指望它识别v-if） -
atom-html-preview（本地双击打开浏览器预览，不是内嵌窗格 —— 内嵌的browser-plus插件已多年未维护，点开就报Failed to load resource）
别装 htmlhint 或 linter-jshint：它们默认校验 JS 语法，对纯 HTML 文件会误报 Unexpected token <；真要校验，用命令行跑 npx html-validate 更稳。
为什么 <img src="xxx"> 不自动补全路径
Atom 默认不解析当前文件夹结构，autocomplete-html 的路径补全是“静态字典式”的 —— 它只扫项目根目录下一级的 .jpg/.png 文件，不会递归进 assets/images/。解决办法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 把图片直接扔进项目根目录（适合原型阶段）
- 手动配置
core.projectHome到含assets的父级路径（在config.cson里加：core: { projectHome: "/path/to/your/site" }）
别信教程说“开启 fuzzy-finder 就能路径补全”，那是针对文件跳转的，和 src 属性无关。
保存后浏览器不刷新？检查这三处
atom-html-preview 是静态快照，改完必须手动右键 → “Open in Browser” 或按 ctrl+shift+h。如果想保存即刷新，得额外配 Live Server：
- 终端进项目目录，运行
npx live-server --port=8080 - Atom 里用
ctrl+alt+l（需装open-in-browser插件）打开http://127.0.0.1:8080 - 禁用 Atom 自带的
atom-html-preview，否则两个服务端口冲突，浏览器会卡在Connecting...
常见错误：装了 live-server 却没关预览插件，结果改一行代码，浏览器空白页还显示旧内容 —— 其实是两个服务在抢端口。
HTML 编辑在 Atom 里最麻烦的从来不是写标签，而是路径引用、服务启动、插件冲突这三件事互相咬死。调通一次之后，删掉不用的插件，config.cson 里只留四五行配置，反而比 VS Code 开箱即用还顺手。
