VS Code保存时自动缩进HTML需显式启用“Editor: Format On Save”，并配置"[html]": {"editor.formatOnSave":true,"editor.tabSize":2,"editor.insertSpaces":true}，同时禁用detectIndentation以防缩进突变。
VS Code 保存时自动缩进 HTML 文件
VS Code 默认不开启「保存即格式化」，所以即使你配了 tabSize 和 insertSpaces，文件也不会自动重排。必须显式启用该开关，否则所有缩进设置都只影响手动 Tab 操作。
实操建议：
- 打开设置（
Ctrl + ,），搜索format on save，勾选Editor: Format On Save - 在
settings.json中为 HTML 单独加固配置："[html]": { "editor.formatOnSave": true, "editor.tabSize": 2, "editor.insertSpaces": true } - 若已安装 Prettier，还需确认它被设为 HTML 的默认格式化工具，否则 VS Code 会回退到内置格式器——后者对
<link>或<script></script>多属性换行支持极弱
HTML 标签内多属性强制换行（非编辑器内置功能）
VS Code 内置格式器无法把 <link rel="stylesheet" href="/css/main.css" integrity="sha384-..." crossorigin="anonymous"> 这类长标签的属性自动拆成多行并左对齐。这是常见误解：很多人以为「格式化」=「属性垂直排列」，其实不是。
真正能实现这个效果的是外部工具，比如 tidy 或 prettier，且依赖具体配置：
立即学习“前端免费学习笔记（深入）”；
-
tidy -qni --indent-attributes yes -w 140 input.html：核心是--indent-attributes yes，5.6.0+ 才支持；旧版直接忽略 -
prettier --write --tab-width 2 --html-whitespace-sensitivity css src/*.html：靠--html-whitespace-sensitivity css控制属性是否换行，但不如tidy稳定，尤其面对integrity这种超长哈希值时容易折断在中间 - 不要指望快捷键
Shift + Alt + F调用内置格式器达成属性换行——它只会按嵌套层级缩进，属性仍挤在一行
Tab 键缩进行为受三个参数共同控制
按下 Tab 键时，VS Code 实际参考的是三组独立设置：当前文件语言模式、全局 tabSize、以及是否启用了 detectIndentation。它们不总是一致，容易导致「按一次 Tab 缩进 4 格，再按一次变成 2 格」这类混乱。
关键点：
-
editor.detectIndentation默认为true，意味着 VS Code 会扫描文件前 200 行，统计空格/Tab 使用频率，然后自动覆盖你设的tabSize—— 这是多数人缩进突变的根源 - 务必在
settings.json中加"editor.detectIndentation": false，否则团队协作中，有人提交带 4 空格缩进的文件，你一打开就全变成 2 空格，再保存又变回去 -
[html]块里单独设tabSize比全局设更安全，避免影响 JSON 或 Markdown 文件
Prettier 配置中 htmlWhitespaceSensitivity 的陷阱
htmlWhitespaceSensitivity 是 Prettier 处理 HTML 缩进与换行的开关，但它不是布尔值，而是字符串枚举："css"、"strict" 或 "ignore"。设错会导致属性不换行、空格被删、甚至 <pre class="brush:php;toolbar:false;"></pre> 内容错乱。
常见误配：
- 设成
"ignore"：Prettier 完全忽略空白符，缩进和换行全失效，只剩语法修复 - 设成
"strict"：对空格极其敏感，<div><p>text</p></div>中的换行会被当成语义空白而保留，生成多余文本节点，可能破坏 flex 布局 - 推荐始终用
"css"：行为最接近浏览器解析规则，既允许合理换行，又不会把模板中的有意空格当内容处理
真正的难点不在「怎么设」，而在「谁在控制换行」——编辑器快捷键、保存钩子、CLI 工具、Git 预提交脚本，四者可能同时生效，且优先级不同。一个没关掉的 detectIndentation 就能让整个缩进策略失效，比配错参数更难排查。
