Atom本身不运行HTML，需通过atom-live-server插件启动本地HTTP服务（如http://localhost:3000），浏览器必须用http://协议访问才能自动刷新，file://协议无效，且仅监听当前HTML文件所在目录及子目录内的资源变更。
Atom 本身不运行 HTML，所谓“LiveServer 预览”实际是靠 atom-live-server 插件起一个本地 HTTP 服务，再让浏览器用 http:// 协议访问——file:// 下永远触发不了自动刷新，也跑不动 fetch、import 或模块化 JS。
atom-live-server 启动后浏览器没反应？先看协议和端口
插件启动后浏览器打不开或卡在 “Connecting…”，90% 是协议或端口问题：
- 必须用
http://localhost:3000/index.html这类地址，双击打开的file:///...地址完全无效 - 插件默认占
3000端口，被占用时会顺延到3001、3002……但不提示；可查终端输出，或运行lsof -i :3000（macOS/Linux）或netstat -ano | findstr :3000（Windows）确认 - 别同时启用
atom-html-preview，它也默认监听3000，会冲突 - 快捷键
Ctrl+Alt+L（Windows/Linux）或Cmd+Alt+L（macOS）失效？常见原因是系统级快捷键冲突（如输入法、录屏工具），可在 Atom 的Keymap中重绑定为Ctrl+F12等
改了 CSS/JS 但页面不刷新？检查监听路径是否覆盖到
atom-live-server 不扫描整个项目，只监听「当前打开的 HTML 文件所在目录及其子目录」：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 如果
index.html在/project/src/，而style.css在/project/assets/，改 CSS 不会触发刷新 - 解决办法：把 HTML 移到项目根目录，或把资源（CSS/JS/images）移到同级或子目录下，确保路径能被相对引用，比如
./css/style.css -
@import的 CSS 文件变更不会触发刷新，只响应和<script></script>标签引入的资源 - 浏览器控制台报
404？说明路径写错，不是插件问题，而是 HTML 里写的src或href没对上服务根路径
为什么推荐命令行 http-server 而非插件？
插件方便，但命令行更可控、更少黑盒问题：
-
npx http-server -c-1 -p 8000：指定端口、禁用缓存，避免浏览器读旧资源 - 不用重启 Atom，不依赖插件加载状态，也不怕快捷键冲突
- 支持跨目录引用：只要你在项目根执行命令，
./src/index.html和./assets/style.css就能正确解析 - 如果已用
npm start启了 Vue/React 脚手架，别再开atom-live-server，两个服务抢端口会静默失败
真正容易被忽略的点是：Atom 从不参与渲染，它只负责保存文件。所有“实时”都建立在「文件保存 → 服务监听 → 浏览器 reload」这条链路上，任何一环用错协议、路径或端口，都会断在中间，且错误表现往往像 Atom “没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
