VS Code中HTML格式化异常问题排查与解决

我之前也碰到过一模一样的情况，用VS Code的Shift+Alt+F格式化HTML后，table结构缩进乱得离谱，大概率是这几个原因在搞鬼：

可能的原因 #

• 多格式化插件冲突：如果你的VS Code装了不止一个HTML格式化工具（比如Prettier、Beautify，再加上VS Code自带的HTML formatter），它们的缩进规则会互相打架。比如Prettier对table的缩进逻辑和原生 formatter 完全不一样，很容易出现起始/结束标签缩进不一致的情况。
• 插件配置没调好：比如用Prettier的话，htmlWhitespaceSensitivity设置成strict会对table的空格处理过度；用原生 formatter 的话，没开indentInnerHtml选项，就不会自动缩进table内部的tr、td标签。
• HTML代码本身有语法问题：比如table里嵌套了不符合规范的元素（直接在table里放div而不是thead/tbody），或者有未闭合的标签，格式化工具识别不了正确的结构，自然没法给你正确缩进。

解决方法 #

1. 先统一格式化插件 #

打开VS Code的已安装插件列表，只留一个你常用的HTML格式化工具：

• 偏好Prettier的话：在设置里搜Default Formatter，把HTML的默认 formatter 设为esbenp.prettier-vscode。
• 想用原生 formatter 的话：把默认 formatter 设为vscode.html-language-features。

2. 调整对应插件的配置 #

针对Prettier：

打开VS Code设置（Ctrl+,），搜索这两个选项：

• 把htmlWhitespaceSensitivity改成css（默认的strict对table空格太苛刻，容易搞乱缩进）。
• 检查printWidth设置，别设太小导致内容强行换行打乱结构。

针对VS Code原生HTML formatter：

搜HTML: Indent Inner Html，勾选这个选项，table内部的tr、td就会自动缩进了。另外可以调整HTML: Format Indent Size，确保缩进大小符合你的习惯。

3. 修复HTML代码的语法问题 #

把你的HTML代码过一遍，确保table结构符合规范：

• table里最好显式写thead、tbody标签（即使省略也能识别，但显式写出来更稳妥）。
• 不要在table、thead、tbody里直接放非表格元素（比如div、p），要放的话得嵌套在td里，或者用<caption>标签。
• 检查所有标签是否闭合，比如有没有漏写</tr>或者</td>。

最后验证 #

改完配置或修复代码后，再按Shift+Alt+F格式化一遍，应该就能看到table的起始/结束标签缩进一致，内部元素也乖乖缩进了。

内容的提问来源于stack exchange，提问作者Jesper