VS Code 默认不接管 HTML 格式化，必须手动指定 Prettier 为默认格式化器（esbenp.prettier-vscode），禁用内置 html.format.enable，并配置 printWidth: 100 和 htmlWhitespaceSensitivity: "css"。
VS Code 默认不接管 HTML 格式化，装了 Prettier 也白装——必须手动指定它为默认格式化工具，否则 Format Document 永远调不出 Prettier。
为什么右键“Format Document”不显示 Prettier？
不是插件没装，也不是配置写错，而是 VS Code 默认把 HTML 文件交给内置的 vscode.html-language-features 处理。即使你项目里有 .prettierrc，它也完全无视。
- 打开任意一个
.html文件，右键 → Format Document With… → Configure Default Formatter… - 从列表中选
Prettier - Code formatter（注意名称要完全匹配） - 检查设置里是否启用了
editor.formatOnSave，路径：Settings → Text Editor → Formatting → Format On Save - 确认项目根目录下的
.vscode/settings.json里没有"html.format.enable": true—— 这是内置格式化器的开关，和 Prettier 冲突
HTML 属性被强行折成多行？调这两个配置
<div class="a b c d e f" data-id="123" title="long text"> 被拆成三行，不是 bug，是 Prettier 按 printWidth 主动换行的结果。80 是 JS 的舒适区，对 HTML 来说太激进了。
-
printWidth: 100：设为 100 更合理，能保住多数单行属性；避免设 60 或 80 -
htmlWhitespaceSensitivity: "css"：必须设这个值，否则<p><img>text</p>可能被错误拆开，破坏行内布局逻辑 - 别碰
bracketSameLine: true：HTML 多属性时会让>藏在末尾，找都找不到
正确片段示例（.prettierrc）：
立即学习“前端免费学习笔记（深入）”；
{
"printWidth": 100,
"htmlWhitespaceSensitivity": "css",
"tabWidth": 2,
"useTabs": false
}保存时自动格式化但没反应？查语言模式和文件关联
VS Code 不是靠后缀判断格式化行为，而是靠当前编辑器的语言模式（右下角显示）。如果显示的是 Plain Text 或 HTML (EJS)，Prettier 就不会触发。
- 按
Ctrl+K然后M，弹出语言模式选择框，手动选HTML - 确保文件扩展名是
.html；若用.htm或自定义后缀，需在settings.json中加"files.associations": { "*.htm": "html" } - 检查是否有其他插件劫持了格式化流程，比如
Beautify，禁用它或调整优先级
团队协作时格式总不一致？统一 .vscode/settings.json
用户级设置（User Settings）只影响本地，别人 clone 项目后照样乱。真正起效的是项目级配置，且必须提交到 Git。
- 在项目根目录新建
.vscode/settings.json，内容如下：
{
"[html]": {
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true
}-
"editor.defaultFormatter"的值必须和插件 ID 完全一致，Prettier 官方插件 ID 是esbenp.prettier-vscode，别写成prettier.prettier-vscode或漏掉-vscode - 别忘了把
.prettierrc也提交，否则成员各自配置容易冲突
最常被忽略的一点：Prettier 对 style 属性、class 值、data- 属性里的内容完全不解析，只管结构排版。图片对齐失效？那一定是 CSS 没写对，不是格式化的问题。
