Prettier不格式化HTML的根本原因是VS Code未将HTML类型交由Prettier处理，需手动设为默认格式器并禁用内置html.format.enable；关键配置printWidth设为100、htmlWhitespaceSensitivity设为"css"，且二者必须同时生效。
为什么Prettier不格式化你的HTML文件
根本不是插件没装或配置写错，而是VS Code默认压根没把html类型交给Prettier处理。它会静默使用内置格式器（由html.format.enable控制），哪怕你装了esbenp.prettier-vscode、写了.prettierrc，也完全无效。
必须手动授权：打开任意.html文件 → 右键 → Format Document With… → Configure Default Formatter… → 选中Prettier - Code formatter（名字必须一字不差）。
同时检查项目根目录的.vscode/settings.json，删掉或注释掉这行："html.format.enable": true。否则冲突直接覆盖所有配置。
关键配置项：printWidth和htmlWhitespaceSensitivity
printWidth: 100是HTML场景下的务实选择。默认80太窄，data-test-id="xxx"、aria-label="very long descriptive text"这类属性一出现就换行，反而破坏可读性；设成120又容易让多属性标签挤成超长单行，难定位闭合标签。
htmlWhitespaceSensitivity: "css"必须显式设置。否则Prettier可能把<p><img>text</p>错误拆成三行，破坏行内元素的渲染逻辑——这不是bug，是它按XML模式解析时的默认行为。
别碰bracketSameLine: true。HTML标签属性一多，>飘在末尾，找闭合位置得瞪眼数空格。
如何让
Prettier默认会处理<style></style>和<script></script>块内的内容，但前提是语言模式识别准确、且格式化器已绑定到html类型。
确认右下角状态栏显示的是HTML（不是Plain Text或PHP）；
确保.vscode/settings.json里有：{"[html]": {"editor.defaultFormatter":"esbenp.prettier-vscode"}}；
选中<style></style>内全部CSS → 右键 → Format Selection，它会按CSS规则缩进、空行、大括号对齐；
用Shift + Alt + F格式化整个文档时，<style></style>和<script></script>区块也会一并处理，无需额外配置。
哪些内容Prettier根本不碰
它只管结构、属性顺序、引号、缩进、换行，**不解析也不修改任何样式语义**。比如<img align="right">里的align，或者 style="max-width:90%"，Prettier视而不见。
<script></script>块里的JS代码会被格式化，但JS语法错误、未使用变量、console.warn等，全靠ESLint，Prettier不管。
如果要检查HTML内联脚本，得配eslint-plugin-html，否则<script></script>里的JS不会被ESLint扫描到。
真正容易被忽略的，是printWidth和htmlWhitespaceSensitivity这两个配置必须同时生效——单独调一个，换行逻辑依然错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
