右下角语法识别必须设为html/javascript/css，atom不自动猜测语言，新建文件默认plain text导致补全、高亮、缩进失效；需手动点击右下角选择对应语法，避免误选html(rails)等变体，并安装emerald-theme、autocomplete-html、language-babel三个基础插件即可满足网页开发刚需。

右下角语法识别必须设为 HTML/JavaScript/CSS

Atom 不会自动猜你写的是什么语言，新建文件默认是 Plain Text，补全、高亮、缩进全失效。点右下角文字（比如显示 Plain Text），选 HTML、JavaScript 或 CSS 才真正启用对应语法支持。

常见错误：误点 HTML (Rails) 或 JavaScript (Babel) —— 这些变体依赖额外插件，新手阶段反而容易出错。基础开发只用官方原生 grammar。

• 写页面结构 → 选 HTML
• 写交互逻辑 → 选 JavaScript
• 写样式 → 选 CSS

装这三个插件就足够起步

新手不需要堆插件，装多反而卡、冲突、搞不清谁在干活。以下三个覆盖 90% 网页编辑刚需：

• emerald-theme（或 one-dark-ui + one-dark-syntax）：自带主题太灰，换一个更清晰的 UI 和配色
• autocomplete-html：输入 <di> 就提示 <code><div>，不用背标签名 <li> <code>language-babel（可选但推荐）：如果练 ES6+ 语法（比如 const、箭头函数），它比原生 JavaScript grammar 解析更准，报错位置也更靠谱

别碰 atom-ide-ui 或 ide-javascript：它们依赖 LSP 服务，要配 Node.js 路径、下载额外 server，新手第一周根本用不上，还常因版本不匹配报 Connection refused。


Atom编辑器mac版下载
最流行的的开源编辑器
下载

快捷键别记太多，先盯住这四个

Atom 的快捷键列表很长，但新手只要熟用这四个，就能完成“写→存→预览→改”的最小闭环：

• Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（macOS）：命令面板，查所有功能，比如搜 tree view 就能打开文件树
• Ctrl+Shift+F：在整个项目里搜关键词，比如找所有 console.log
• Ctrl+Shift+M：当前 HTML 文件一键唤出 Markdown 预览（仅限 .html 后缀且含 Markdown 内容时生效）
• Ctrl+Shift+B：调出构建面板——但新手慎用，除非你已配好 atom-build 和 .atom-build.yml；否则直接右键用浏览器打开 HTML 文件更稳

别急着改 keymap.cson：很多教程教把 Tab 绑定为补全确认，但原生 Enter 已够用；强行改反而导致缩进异常，尤其在嵌套 HTML 标签里按 Tab 变成插入空格而不是跳到下一个占位符。

预览网页别依赖插件，用系统浏览器更可靠

新手常被 open-in-browser 或 browser-plus 插件吸引，结果遇到路径解析错误、相对 CSS 不加载、CORS 报错等问题。其实最稳的方式是：

• 保存文件（Ctrl+S）
• 在文件管理器里双击 index.html → 用 Chrome/Firefox 打开
• 改完再保存 → 切回浏览器按 F5 刷新

这样绕过 Atom 的沙箱路径处理，避免 file:/// 协议下 Ajax 请求失败、import 模块 404 等隐形坑。等你开始用本地服务器（比如 http-server）时，再考虑集成预览。