Atom本身不解析HTML结构，修复错乱排版必须依赖atom-beautify或prettier-atom；前者需手动安装js-beautify CLI并配置为HTML引擎，启用Wrap Line Length、勾选Vue Component支持，且grammar须为HTML/Vue Component，否则快捷键和自动格式化均无效。
Atom 本身不解析 HTML 结构，所谓“修复错乱排版”必须靠外部格式化工具驱动，atom-beautify 或 prettier-atom 是唯二可行路径；原生 Auto Indent 和 Reindent 对 <div><p><span> 这类嵌套完全无效。
HTML 格式化必须启用 js-beautify 引擎
atom-beautify 默认对 HTML 使用 js-beautify，但它不会自动安装——你得手动装 CLI 工具并配置路径：
- 运行
npm install -g js-beautify，然后在终端验证js-beautify --version能输出版本号 - 进
Packages → atom-beautify → Settings，找到HTML区块，把Beautifier下拉菜单选为js-beautify - 勾选
HTML: Wrap Line Length（建议设为120），否则单行标签可能被强行折断成多行，破坏语义 - 如果项目用 Vue 单文件组件，
.vue文件默认不启用 HTML 格式化——必须去Languages设置页手动勾选Vue Component
Ctrl+Alt+B 按了没反应？先看 grammar 和 keymap
快捷键失效的根源几乎全是语言识别或绑定缺失：
- 右下角 grammar 显示
Plain text？点击它，手动选成HTML或Vue Component——atom-beautify不处理未识别语法的文件 - 打开
Config → Keymap，确认keymap.cson里有这行（注意缩进是 2 空格）：'.editor': 'ctrl-alt-b': 'atom-beautify:beautify-editor' - 保存后执行
Window: Reload，别只禁用再启用插件——进程级重启才生效 - 如果仍不行，打开命令面板
Ctrl+Shift+P，输入beautify-editor，能触发说明插件工作正常，快捷键被其他插件劫持了
格式化后标签换行/缩进异常？检查三处配置冲突
HTML 排版错乱常因缩进规则打架，优先级是：项目级配置 > 插件设置 > 编辑器全局设置：
立即学习“前端免费学习笔记（深入）”；
- 项目根目录放
.jsbeautifyrc，内容至少包含：{"indent_size": 2, "wrap_line_length": 120, "end_with_newline": true} - 进
Packages → atom-beautify → Settings → HTML，关掉Indent With Tabs（设为false），否则它会无视编辑器的Soft Tabs设置 - Settings → Editor → 确保
Tab Length设为2且勾选Soft Tabs—— 和.jsbeautifyrc的indent_size必须一致 - 删掉
.editorconfig里的indent_style或indent_size，除非你明确需要它覆盖.jsbeautifyrc
Vue/JSX 中 HTML 片段不格式化？language mode 和插件支持要双重确认
<template> 里的 HTML、JSX 表达式、甚至 v-if 嵌套，都依赖 Atom 正确识别语法层级：
-
.vue文件右下角 grammar 必须是Vue Component，不是HTML或JavaScript—— 否则atom-beautify只格式化 script 或 style 块 - 进
Packages → atom-beautify → Settings → Languages，确保Vue Component已勾选，且其Beautifier设为js-beautify - JSX 文件（
.jsx）默认无 language support，需进Config → Core → File Types手动加映射："*.jsx": ["source.js.jsx"] - 如果用了 Prettier，
prettier-atom对 Vue 支持有限——它会格式化<script>但跳过<template>，此时必须切回atom-beautify
真正容易被忽略的是：Atom 已于 2022 年底终止维护，js-beautify 新版本（v3.6+）和 atom-beautify v0.34+ 存在兼容问题，部分 HTML5 语义标签（如 <dialog>、<slot>）可能被错误折行。若反复调不通，直接用 VS Code + prettier 插件更省时间。
