Atom不运行HTML，仅作为纯文本编辑器需配合外部HTTP服务（如live-server）实现保存即刷新，插件配置须精简避免冲突，路径补全依赖项目根目录设置。
Atom 本身不运行 HTML，它只写 HTML
Atom 是纯文本编辑器，没有内置浏览器、不解析 HTML、不执行 JS、也不监听文件变化——所谓“运行 HTML”，本质是配一套外部协作链：写 → 保存 → 启服务 → 刷新。指望 Atom 自己点一下就跑起来，会卡在 file:// 路径错误、跨域拦截、ES 模块加载失败这些地方反复懵圈。
- 双击打开
index.html是用系统默认浏览器读取本地文件，不是开发环境 -
atom-html-preview只是静态快照，改完必须手动右键 → “Open in Browser” 或按ctrl+shift+h - 真要保存即刷新，必须起 HTTP 服务（
live-server/http-server/python3 -m http.server），且 Atom 不能同时开着冲突插件
只装三个插件，别碰 autocomplete-html 以外的“智能补全”
Atom 的 HTML 支持靠插件拼凑，但多数人一上来就装 htmlhint、linter-jshint、emerald-html 全家桶，结果补全错乱、输入卡顿、报错 Unexpected token ——那是因为它们默认当 JS 文件校验。
- 必装：
emerald-html（语法高亮更准，尤其对模板字符串和自定义标签） - 必装：
autocomplete-html（补原生标签和属性，不支持 Vue/React JSX） - 可选但推荐：
html-snippets（输!+Tab直出 HTML5 结构） - 禁用：
atom-html-preview如果你打算用live-server，否则两个服务抢端口，浏览器卡在Connecting...
路径补全根本不会进 assets/images/，别信模糊搜索
autocomplete-html 的 src 补全是“字典式”的：它只扫描项目根目录下一级的 .jpg / .png 文件，不会递归子目录。所以 <img src="assets/images/logo.png" alt="Atom编辑器怎么配置HTML开发_Atom编辑器HTML开发教程【最新】" > 永远不会被自动补全出来。
- 临时解法：把图片扔进项目根目录（适合原型阶段）
- 正经解法：在
config.cson里加一行：core: { projectHome: "/path/to/your/site" }，让 Atom 知道“项目根”在哪 - 别开
fuzzy-finder期待它补src——那是用来跳文件的，跟属性值无关
Live Server 插件不如命令行起服务稳
atom-live-server 插件容易版本滞后、端口固定（3000）、根目录逻辑混乱（它以当前打开文件所在目录为根，不是项目根），而且一旦和 atom-html-preview 共存，必冲突。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：终端进项目根，执行
npx live-server --port=8080 - 快捷启动：Atom 内置终端按
ctrl + `，输入命令即可，错误直接打在终端里（比如Port 8080 is already in use） - 备选命令：
npx http-server -p 8000（需先npm install -g http-server）或python3 -m http.server 8000
HTML 开发在 Atom 里最麻烦的从来不是写标签，而是路径引用、服务启动、插件冲突这三件事互相咬死。调通一次之后，删掉不用的插件，config.cson 里只留四五行配置，反而比 VS Code 开箱即用还顺手。
