atom本身不运行html，它只是文本编辑器；真正“运行”需通过浏览器打开（如拖入chrome）、起本地服务器（如atom-live-server或python -m http.server），否则file://协议会导致cors、路径解析等错误。
Atom 本身不运行 HTML，它只是编辑器
Atom 是纯文本编辑器，没有内置浏览器或运行环境。你写完 index.html，双击打开或拖进浏览器才是“运行”，Atom 自己不会渲染页面、不执行 JS、也不报错——它只负责高亮和保存。
常见错误现象：file:// 路径下 AJAX 失败、fetch 报 CORS error、本地图片不显示——这些都不是 Atom 的问题，而是浏览器直接读取文件时的限制。
- 所有静态资源（图片、CSS、JS）路径必须是相对路径或绝对路径，不能用
./assets/style.css却把 HTML 放在桌面运行 - 如果用了
fetch('./data.json')，必须起一个本地服务器，否则浏览器会拦截 - 不要右键“在浏览器中打开”再怀疑 Atom 没配好——那动作跟 Atom 无关
用 atom-live-server 插件模拟本地服务
这是最接近“运行”的方案：插件启动一个微型 HTTP 服务器，让 http://localhost:3000 可访问，绕过 file:// 限制。
安装步骤：
立即学习“前端免费学习笔记（深入）”；
- 打开 Atom →
Atom菜单 →Preferences→Install标签页 - 搜索
atom-live-server，点击安装 - 重启 Atom（部分版本需要）
- 打开你的
index.html文件，按快捷键Ctrl+Alt+L（Windows/Linux）或Cmd+Alt+L（macOS）
注意：atom-live-server 默认根目录是当前打开的文件所在文件夹，不是项目根。如果你在子目录打开 HTML，它不会自动向上找 css/ 或 js/ ——路径仍需写对。
命令行起服务更可控（推荐替代方案）
比起插件，用终端起服务更透明、兼容性更好，也避免插件更新滞后或冲突。
常用命令（任选其一，无需 Atom 参与）：
- Node.js 环境：在项目根目录运行
npx http-server（需全局装http-server） - Python 3：运行
python3 -m http.server 8000 - Python 2：运行
python -m SimpleHTTPServer 8000
优势：
- 端口可指定（比如避开 3000 冲突），地址明确（
http://localhost:8000） - 支持热重载的工具如
live-server还能监听文件变化自动刷新 - 错误信息直接打在终端里，比插件弹窗更易排查（比如端口被占、路径 404）
别依赖 “右键→Open in Browser” 类插件
这类插件（如 open-in-browser）只是调用系统默认浏览器打开 file:// 路径，本质没变。遇到跨域、相对路径解析错、ES6 模块加载失败等问题，它不会帮你解决，反而让你误以为“运行成功了”。
典型坑：
- HTML 里写了
<script type="module" src="./main.js"></script>，但用右键打开 → 浏览器报Failed to load module script - CSS 里
background: url(../img/logo.png)，文件结构没问题，但右键打开时路径解析错位 → 图片 404 - 插件默认用 Chrome，但你实际开发适配的是 Firefox → 样式/行为差异被掩盖
真要快速预览，不如手动拖进浏览器，同时打开开发者工具看 Console 和 Network 面板——这才是判断“是否真正跑起来”的依据。
