Prettier 要真正格式化 HTML 文件，必须在 .vscode/settings.json 中为 [html] 单独配置 editor.defaultFormatter 为 "esbenp.prettier-vscode"，并禁用 html.format.enable；同时建议设 printWidth: 100 和 htmlWhitespaceSensitivity: "css"。
VS Code 默认不格式化 HTML 文件，不是插件没装、配置写错，而是根本没授权 Prettier 接管 html 类型——必须为 [html] 单独指定默认格式化器，否则右键“Format Document”永远调不出 Prettier。
怎么让 Prettier 真正接管 .html 文件
这是最常卡住的第一步。VS Code 对每种语言（如 javascript、typescript、html）是单独管理格式化器的，顶层的 "editor.defaultFormatter" 配置对 .html 无效。
- 打开任意一个
.html文件，右键 → Format Document With… → Configure Default Formatter… - 从列表中选 Prettier - Code formatter（名字必须完全匹配，不能选错分支）
- 检查项目根目录的
.vscode/settings.json，确认存在且仅含如下内容（不含冲突项）：{ "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } - 删掉或注释掉
"html.format.enable": true—— 这是 VS Code 内置格式器的开关，留着就白配
为什么 <div class="a b" data-id="123"> 被拆成三行<p>这不是 bug，是 <code>printWidth 在严格执行。HTML 属性名长、值也长（比如 data-test-id、aria-label），默认 80 极易触发换行，反而降低可读性。
-
printWidth: 100 是关键：建议设为 100，避免设 60 或保留 80
-
htmlWhitespaceSensitivity: "css" 必须设：否则 <p><img alt="VSCode格式化HTML代码用什么_VSCode配置Prettier【详解】" >text</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 可能被错误折行，破坏行内布局逻辑
- 别开
bracketSameLine: true：HTML 多属性时会让 > 飘在末尾，极难定位标签闭合位置
怎么格式化 <style></style> 标签里的 CSS
printWidth: 100 是关键：建议设为 100，避免设 60 或保留 80
htmlWhitespaceSensitivity: "css" 必须设：否则 <p><img alt="VSCode格式化HTML代码用什么_VSCode配置Prettier【详解】" >text</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 可能被错误折行，破坏行内布局逻辑bracketSameLine: true：HTML 多属性时会让 > 飘在末尾，极难定位标签闭合位置<style></style> 标签里的 CSSPrettier 默认会处理 <style></style> 块内的 CSS，但前提是语言模式识别正确、且格式化器已绑定到 html 类型。
- 右下角状态栏确认语言模式是 HTML（不是 Plain Text 或 PHP）
- 确保
.vscode/settings.json中有"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 选中
<style></style>内全部 CSS 内容 → 右键 → Format Selection，Prettier 会按 CSS 规则缩进、空行、大括号对齐 - 若只格式化文档整体（
Shift + Alt + F），Prettier 也会一并处理<style></style>和<script></script>区块，无需额外配置
为什么保存时不自动格式化
开了 editor.formatOnSave 却没反应，大概率是三个地方之一出了问题：
-
editor.formatOnSave必须写在项目级.vscode/settings.json中，用户级设置会被覆盖 - 检查是否启用了
"editor.codeActionsOnSave": { "source.fixAll": true }—— 这是 ESLint 的自动修复开关，和 Prettier 抢着改代码，导致抖动或静默失效 - 确认
prettier.requireConfig设为true：否则 Prettier 会忽略你的.prettierrc，退回到内置默认规则（比如双引号、无分号）
复杂点在于：Vue 单文件组件里，<template></template>、<script></script>、<style></style> 是三套解析逻辑，缺一个语言绑定，对应区块就原地躺平；而 <script setup></script> 还要求 Prettier ≥ 2.8.0，旧版本直接跳过。
