根本原因是vs code默认不将.html文件交给prettier处理，必须手动配置：右键选“configure default formatter”并指定esbenp.prettier-vscode；禁用html.format.enable；确保语言模式为html；printwidth设为100更合理；htmlwhitespacesensitivity必须设为"css"；vue等文件需通过prettier.documentselectors或parser: "html"显式支持。
VS Code 里 HTML 文件不格式化，根本原因是没授权
不是插件没装、配置没写，而是 VS Code 默认不把 .html 文件交给 Prettier 处理——它优先用内置格式器（由 html.format.enable 控制），Prettier 被静默跳过。
必须手动完成三件事：
- 打开任意
.html文件，右键 → Format Document With… → Configure Default Formatter… → 选中esbenp.prettier-vscode（名字必须完全一致） - 检查项目根目录
.vscode/settings.json或用户设置，删掉或注释掉"html.format.enable": true - 确认右下角语言模式是
HTML（不是Plain Text、PHP或其他），点一下可切换
printWidth 设成 80 会让 class 属性疯狂换行
printWidth 对 HTML 的影响比 JS 更敏感：一个 div 带七八个 class 或 data 属性，80 宽度极易拆成三到四行，反而降低可读性。
更务实的做法是：
- 设为
100：能保住绝大多数单行属性，又不至于宽到让超长标签挤成一行难以维护 - 别设
60或更低：纯属自找麻烦，尤其在邮件模板、管理后台等属性密集场景 - 注意：这和 JS/TS 场景不同，HTML 没有逻辑换行需求，宽度只服务于视觉扫描效率
htmlWhitespaceSensitivity 必须设为 "css"
这个选项控制标签间空白是否保留。设错会导致布局错乱或空格被吃掉，比如 <p>Hello<img>World</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img
src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a>
<p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 中的文本间距异常。
"css" 是唯一推荐值：
- 它按 CSS 渲染规则判断空白是否有意义（如 inline 元素间的空格会被浏览器渲染）
-
"strict"会删除所有空白，破坏排版；"ignore"则放任缩进污染结构 - 即使你不用 CSS，也选
"css"——这是 Prettier 对 HTML 的默认行为，兼容性最稳
Vue/小程序里 HTML 不生效？语言 ID 没对上
Prettier 默认只处理 .html 文件，.vue、.wxml 等文件需要显式告诉它“这是 HTML 内容”。
关键动作：
- 确保 VS Code 右下角语言模式是
Vue或WXML，而不是HTML - 在项目
.vscode/settings.json中加："prettier.documentSelectors": ["*.vue", "*.wxml"] - 如果用
prettier.config.js，需明确启用 HTML 解析器：parser: "html"（尤其 v3+ 版本） - 验证方式：运行
npx prettier --parser html --write src/index.vue，成功即支持
复杂点在于嵌套结构——比如 Vue 的 <template></template> 里混着 JS 表达式，Prettier 不管那部分，得靠 eslint-plugin-html 配合 ESLint 才能覆盖全链路。这点容易被忽略，但一旦漏掉，内联脚本就永远游离在格式化之外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
