VS Code中按Ctrl+S自动格式化HTML需三步：安装Pretterr插件、启用“Editor: Format On Save”设置、右键HTML文件选择Prettier并设为默认格式化器；若无效，常因未指定默认格式化器或ESLint规则冲突。
直接说结论：不用“选软件”，而是按你当前在做的事，决定用哪条路径来格式化 HTML —— 保存时自动处理、临时粘贴修复、命令行批量整理，还是浏览器里快速看一眼结构，每种场景对应不同工具，硬套“哪个更好”反而容易踩坑。
VS Code 里怎么让 Ctrl+S 自动格式化 HTML？
这是多数前端日常最该配好的一步。默认不生效，得手动打开开关并确认后端工具可用。
- 先装插件：
Prettier或Beautify（推荐Prettier，它对 Vue/React 模板里的 HTML 更稳） - 进设置搜
format on save，勾选Editor: Format On Save - 关键一步：右键 HTML 文件 →
Format Document With...→ 选Prettier并设为默认，否则保存时可能调用错后端 - 如果格式化后引号变成单引号、缩进变 2 空格但你要 4 空格，就去项目根目录加
.prettierrc文件，写{"tabWidth": 4, "singleQuote": false}
常见错误：Ctrl+S 没反应，其实是没指定默认格式化器；或者用了 ESLint 插件但没配 eslint-config-prettier，导致规则打架。
临时修一段乱码 HTML，不想开编辑器怎么办？
适合发版前紧急检查、从邮件/微信里复制过来的片段、或排查别人给的模板。这时候在线工具最直接，但要注意边界。
立即学习“前端免费学习笔记（深入）”；
- 首选 FreeFormatter：支持 UTF-8 中文不乱码、右侧实时渲染、标出未闭合标签，且所有处理都在浏览器内完成，不上传服务器
- 别用来源不明的“HTML美化网站”，有些会偷偷收集代码片段用于训练模型
- 如果代码里含
data-v-xxx、v-if这类框架指令，htmlformatter.com有时会误删属性值，FreeFormatter兼容性更稳 - 粘贴前先手动删掉注释块
<!-- ... -->，部分在线工具解析注释时会卡住或格式错乱
tidy 命令行格式化 HTML，为什么输出全是警告？
tidy 是老牌工具，强在修复语法错误（比如漏掉 </p>），弱在“美观”——它不是为现代排版风格设计的。
- 运行
tidy -i -m input.html时，-i是缩进，-m是原地修改；但默认会把所有属性转成双引号、强制换行，和你习惯的 Prettier 风格完全不同 - 常见报错如
line 12 column 23 - Warning: missing<code>alt</code>attribute on img，这不是 bug，是tidy在做语义校验，可加-w 0关掉警告 - 想让它少干预，加
-indent -wrap 0 -quiet，但别指望它能处理<template>或 JSX 语法 - 真正适合它的场景：老旧 CMS 导出的 HTML、爬虫抓下来的脏数据、需要补全闭合标签的原始文档
Chrome DevTools 里右键“Reformat node”失灵了？
这个功能只作用于 Elements 面板中已渲染的 DOM 树，不是源码文件，而且有隐藏限制。
- 必须是已加载完成的节点，动态插入的
innerHTML内容要等 JS 执行完才能右键格式化 - 如果页面用了 Shadow DOM，展开
#shadow-root后再右键才有效，直接对 host 元素操作没反应 - 它不会改源文件，只是临时美化显示；刷新页面就恢复原样
- 快捷键
Ctrl+Shift+F只对 Sources 面板里的 JS/CSS 文件生效，对 Elements 面板无效
真正容易被忽略的是：DevTools 的格式化不识别自定义元素（比如 <my-button>），会把它当普通标签缩进，可能破坏语义层级。这种时候，宁可切到 Sources 里打开原始 HTML 文件再格式化。
