Atom本身不渲染HTML，只显示源码；预览需选对方案：atom-html-preview内嵌渲染但不支持fetch等API；atom-live-server启本地HTTP服务实现保存即刷新，须用http://访问；open-in-browser仅手动打开，最轻量。
Atom 本身不渲染 HTML，只显示源码；所谓“预览”，本质是三种路径：内嵌轻量渲染、调用系统浏览器、起本地 HTTP 服务——选错方案，保存后页面不会自动刷新，甚至连 CSS 都不生效。
atom-html-preview 插件：右键即开，但不走 HTTP 协议
它把 HTML 当作纯文本解析后，在 Atom 窗口内新开一个只读渲染面板，优点是启动快、不依赖网络、支持本地 <link rel="stylesheet"> 和 <script> 标签引入的资源。
- 安装后必须重启 Atom，否则右键菜单里没有
Preview HTML选项 - 快捷键
Ctrl+Shift+H（Windows/Linux）或Cmd+Shift+H（macOS）仅在当前文件是.html后缀且语言模式为HTML时才生效；右下角状态栏显示Plain Text就说明没识别成功 - 它不处理
@import的 CSS 文件，也不执行 JS 中的fetch或document.write，所有动态行为都会被忽略 - 如果你引用了相对路径的图片或字体，比如
./assets/logo.png，而当前 HTML 不在项目根目录下，预览面板会报 404 —— 它的资源加载路径基于文件系统，不是服务器上下文
atom-live-server 插件：保存即刷新，但必须用 http:// 打开
它起一个最小化的本地 Web 服务器（默认端口 3000），监听当前 HTML 文件所在目录及其子目录下的变更，触发浏览器 location.reload()。这是真正接近开发体验的方案。
- 安装命令是
apm install atom-live-server，装完务必关掉 Atom 再重启，否则快捷键Ctrl+Alt+L不注册 - 启动后浏览器地址一定是
http://localhost:3000/xxx.html，绝不能是file:///协议——后者会导致跨域、CSS @import 失效、fetch报错 - 它只监听“启动时那个 HTML 文件”的父/子路径。例如你在
/project/src/index.html按快捷键，那么/project/assets/style.css就不在监听范围内，改了也不会刷新 - 端口被占用时它会静默顺延到
3001、3002……但不会提示，容易误判为插件失效；可手动在设置里指定端口，或先杀掉lsof -i :3000（macOS/Linux）或netstat -ano | findstr :3000（Windows）
为什么改了 CSS 却没刷新？三个高频原因
不是插件坏了，而是路径、协议或引用方式卡在某个环节。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
@import的 CSS 文件永远不会触发刷新 ——atom-live-server只响应<link>和<script>标签的直接引入，@import是 CSS 层级的请求，不在它的监听粒度内 - HTML 中写的路径是
../css/main.css，但文件实际放在./styles/main.css，浏览器控制台出现GET http://localhost:3000/css/main.css 404，说明路径错位，得同步调整引用或移动文件 - 用了构建工具（如 Vite、Webpack）或脚手架（如 Create React App），它们自己占着
3000端口，atom-live-server启动失败却无提示，此时应关掉其他服务再试
别踩这些隐性坑
很多问题不是配置不对，而是 Atom 自身机制和插件边界没理清。
-
atom-html-preview和markdown-preview-plus共存时，Ctrl+Shift+M会被后者劫持，导致 HTML 文件按快捷键弹出 Markdown 预览 —— 进Settings → Keybindings搜html-preview，删掉冲突绑定 - Windows 上装了
linter-htmlhint，打开大一点的 HTML 模板（含 Vue 模板字符串或长注释块）会卡顿几秒，这不是 Atom 慢，是插件语法解析没做流式处理；临时方案是禁用该插件 - Mac 用户发现
Cmd+Alt+L没反应，先检查系统偏好设置 → 键盘 → 快捷键 → 输入法，确认没把它设成切换输入法；再进 Atom 的Keybindings页面搜atom-live-server，看命令是否真绑定了
最常被忽略的一点：Atom 没有“运行 HTML”的概念，只有“打开”“预览”“服务”三种动作，每种对应完全不同的资源加载模型。混淆它们，就等于用文件系统路径去调试一个 HTTP 服务的 404 错误。
