Prettier不格式化HTML的根本原因是VS Code默认未将其设为HTML格式化器，需手动配置默认格式化器、禁用内置HTML格式化、确保语言模式正确，并正确设置printWidth=100、htmlWhitespaceSensitivity="css"及prettier.requireConfig=true。
为什么Prettier不格式化HTML文件
不是插件没装、配置没写，而是VS Code默认根本没把Pretterr当作HTML的格式化器——它静默跳过，继续用内置的vscode-html-language-features。哪怕.prettierrc存在、插件已启用，只要没手动授权，就等于没配。
必须做三件事：
- 打开任意
.html文件 → 右键 → Format Document With… → Configure Default Formatter… → 选中Prettier - Code formatter（名字一字不能差） - 检查
.vscode/settings.json或用户设置里有没有"html.format.enable": true，有就删掉或注释掉 - 确认右下角语言模式显示的是
HTML，不是Plain Text或PHP（点一下可切换）
printWidth设80还是100？
printWidth设太小（比如80），<div class="a b c d e" data-id="123" title="long text">这种常见属性组合就会被硬拆成三四行，反而更难扫读；设太大（比如120），又容易让超长标签挤成一行，破坏结构感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一设为
100：足够容纳多数多属性标签，又不至于失控 - 别设
60或150——前者基本放弃单行属性，后者让diff变得毫无意义 - 注意：这个值只对Prettier生效；如果用VS Code内置格式器，要改
html.format.wrapLineLength
htmlWhitespaceSensitivity必须是"css"
设成"strict"或"ignore"会导致<p><img>text</p>这类行内容被错误折行，破坏渲染逻辑；设成"css"才能让Prettier按CSS盒模型理解空白符，保留内联元素的语义连贯性。
常见踩坑点：
- 漏配这行，格式化后页面布局莫名错位，但查不出HTML语法错误
- 在
.prettierrc里写成htmlwhitespacesensitivity（驼峰）——正确写法是htmlWhitespaceSensitivity（帕斯卡） - 用JSON格式写
.prettierrc时加了尾逗号或注释，导致整个配置失效
prettier.requireConfig设为true才靠谱
不设这个，VS Code会在没找到.prettierrc时退化成内置格式器，结果就是：你本地保存是Prettier风格，同事保存出来却是VS Code原生风格，Git提交里全是无意义的格式抖动。
关键动作：
- 在项目级
.vscode/settings.json里明确写"prettier.requireConfig": true - 同时确保项目根目录有
.prettierrc.json5（推荐用.json5，支持注释和尾逗号） - 不要只靠用户级设置——新成员clone项目后，第一保存就可能掉坑里
真正麻烦的从来不是怎么配，而是不同格式化器之间权限没划清、配置没落地到项目级、或者语言模式被悄悄切成了Plain Text——这些地方一错，所有后续配置都白忙活。
