vscode html格式化混乱的根源在于格式化器选择、缩进配置与嵌套规则不协同：需二选一设置默认格式化器（vscode-html-language-features或prettier），统一配置editor.insertspaces、tabsize、html.format.indentinnerhtml及unformatted项，并确保语言模式正确、formatonsave作用域无冲突。
VSCode 默认能格式化 HTML，但多数人遇到的问题不是“不能”，而是“格式化后更乱”——缩进错位、标签挤成一行、pre 里内容被折行。根本原因在于没控制好格式化器归属、缩进源和嵌套规则。
怎么选对默认格式化工具（vscode-html-language-features 还是 Prettier）
VSCode 自带的 vscode-html-language-features 是轻量、稳定、专为 HTML 设计的格式化器；Prettier（esbenp.prettier-vscode）则强在跨语言统一风格，但对 HTML 的嵌套逻辑处理稍“激进”。两者不兼容，必须二选一。
- 如果你只写纯 HTML 或搭配少量 JS，用内置的更安全：在
settings.json中设"editor.defaultFormatter": "vscode.html-language-features" - 如果项目含 JSX/TSX/JS，且团队已用 Prettier 管理所有代码，那就统一用它，但需额外配
"html.format.enable": false关闭内置格式化，避免冲突 - 检查右下角语言模式是否为
HTML—— 若显示为Plain Text或PHP，格式化根本不会触发
为什么缩进还是错乱？关键看这三个配置项
缩进混乱的根源往往不是格式化器本身，而是编辑器底层缩进行为与格式化逻辑打架。以下三项必须协同设置：
-
editor.insertSpaces必须为true：强制用空格而非 Tab，避免混用导致 Prettier 报Expected indentation of 2 spaces but found a tab -
editor.tabSize设为2或4（推荐2），且editor.detectIndentation设为false：禁用自动探测，防止打开旧文件时被历史缩进污染 -
html.format.indentInnerHtml设为true：否则和不会相对于缩进，结构扁平难读
格式化后标签全挤在一行？调整 wrapLineLength 和 unformatted
默认情况下，VSCode HTML 格式化器会把短标签压成一行（比如 <p>Hello</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill1675" title="VSCode"><img
src="https://img.php.cn/upload/skill/000/000/081/178842972858328.jpg" alt="VSCode" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill1675" title="VSCode" class="overflowclass">VSCode</a>
<p class="overflowclass">避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。</p>
</div>
<a rel="nofollow" href="/xiazai/skill1675" title="VSCode" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>World</p>），这不是 bug，是设计行为。要让它按层级换行，得干预两处：
-
html.format.wrapLineLength控制单行最大字符数，默认120。若设太小（如40），会导致过度换行；设太大（如200）又容易压行。前端项目建议保持80–120 -
html.format.unformatted必须包含"pre", "code", "textarea"：否则<pre class="brush:php;toolbar:false;">console.log('x')</pre>会被强行缩进并折行，破坏原始语义 - 若你用 Prettier，
wrapLineLength无效，改用.prettierrc中的"printWidth": 80
保存即格式化却失效？检查 formatOnSave 的作用域
editor.formatOnSave 开启后仍不生效，常见于以下情况：
- 该设置被工作区（
.vscode/settings.json）或项目级.prettierrc覆盖，优先级顺序是：文件夹级 > 工作区 > 用户全局 - 文件未保存（.html 后缀）或语言模式未识别为 HTML，快捷键
Shift+Alt+F会提示 “没有可用的格式化程序” - Prettier 扩展未启用，或安装后未重启 VSCode —— 某些版本需手动启用（右键扩展 → “启用（工作区）”）
- 大文件（>2000 行）可能超时，加
"editor.formatOnSaveTimeout": 7000防止中断
真正麻烦的不是配置项多，而是它们之间有隐式依赖：比如 html.format.indentInnerHtml 只在 vscode-html-language-features 下生效，而 tabWidth 在 Prettier 里才起作用。改一个，常要同步调另外两个，否则就出现“看着设对了，但就是不对齐”的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
