vscode默认html格式化嵌套错乱，需设html.format.indentinnerhtml: true、editor.tabsize: 2、editor.insertspaces: true，并关闭editor.detectindentation；prettier须配htmlwhitespacesensitivity: "css"以保等空白语义。
VSCode 默认的 HTML 格式化行为经常导致嵌套错乱、属性挤成一行、或自闭合标签被强行改写——这不是你代码写得不对，是编辑器配置没对齐团队/项目的真实需求。
html.format.indentInnerHtml 设为 true 才能正确缩进子元素
这个配置控制 html、body 等根级标签内部是否缩进。默认是 false，结果就是：
-
......—— 全部顶格，毫无层级 - 即使你手动加了空格，保存后也会被抹平
必须显式设为 true，配合 "editor.tabSize": 2 和 "editor.insertSpaces": true，才能让子元素真正缩进两格：
{
"[html]": {
"editor.tabSize": 2,
"editor.insertSpaces": true,
"html.format.indentInnerHtml": true,
"html.format.preserveNewLines": true
}
}
注意：html.format.indentInnerHtml 只影响根元素（html、body、head）的直接子节点，不影响更深层嵌套——那靠的是编辑器对嵌套结构的自动识别能力，不是这个开关管的。
Prettier 的 htmlWhitespaceSensitivity 必须设为 "css"
如果你用 Prettier 格式化 HTML，不配这个选项，<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<code> 里的换行和空格会被暴力压缩，直接破坏内容渲染。
错误表现：
- 原本
<pre class="brush:php;toolbar:false;"> hello\n world </pre>被格式化成<pre class="brush:php;toolbar:false;">hello world</pre> - CSS 的
white-space: pre失效
解决方式：在 .prettierrc 中明确指定：
{
"htmlWhitespaceSensitivity": "css"
}
这个值告诉 Prettier：“别动那些会影响 CSS 白色空间处理的空白”，而不是默认的 "strict"（会删所有“冗余”空白）或 "ignore"（完全不管，容易格式混乱）。
内联 style 属性多值时换行缩进要手动干预
VSCode 内置格式化和 Prettier 都不会自动把长 style 拆成多行。比如：
<div style="color: #333; font-size: 14px; line-height: 1.5; padding: 8px 12px; border-radius: 4px;"></div>
它永远保持单行，可读性差，也不方便 diff 对比。
目前没有开箱即用的自动方案，只能靠两种方式补救：
- 开发阶段手动换行 + 缩进（推荐用 VSCode 的
Shift + Alt + F后再手动调整） - 用构建时工具处理：比如在邮件模板中，用
inline-css工具生成内联样式，它默认支持按分号换行 - 避免在普通页面中写长内联样式——该抽 class 就抽，这是最省事的“格式化”
顺带一提：style 值里每个声明末尾的分号不能省，Prettier 不会帮你补，漏了会导致部分样式失效。
editor.detectIndentation 关掉，否则历史文件会污染新代码
这个选项默认是 true，意思是“看当前文件开头几行用的是空格还是 Tab，就跟着它走”。问题在于：
- 老项目混着 Tab 和空格，VSCode 会随机切风格
- 你刚配好 2 空格，打开一个旧 HTML，它立刻变成 4 Tab，保存后全文件被重排
- Git 提交里全是缩进变更，掩盖真实逻辑修改
解决方案：在 [html] 语言专属设置里强制关闭：
"[html]": {
"editor.detectIndentation": false
}
这样无论打开什么文件，都只认你设定的 tabSize 和 insertSpaces。团队协作时，把这个配置放进 .vscode/settings.json 并提交到仓库，比口头约定管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
