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 内置格式器的开关，留着就白配

为什么

被拆成三行

这不是 bug，是 printWidth 在严格执行。HTML 属性名长、值也长（比如 data-test-id、aria-label），默认 80 极易触发换行，反而降低可读性。

• printWidth: 100 是关键：建议设为 100，避免设 60 或保留 80
• htmlWhitespaceSensitivity: "css" 必须设：否则

  text

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载
  可能被错误折行，破坏行内布局逻辑
• 别开 bracketSameLine: true：HTML 多属性时会让 > 飘在末尾，极难定位标签闭合位置

怎么格式化 标签里的 CSS

Prettier 默认会处理 块内的 CSS，但前提是语言模式识别正确、且格式化器已绑定到 html 类型。

• 右下角状态栏确认语言模式是 HTML（不是 Plain Text 或 PHP）
• 确保 .vscode/settings.json 中有 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
• 选中 内全部 CSS 内容 → 右键 → Format Selection，Prettier 会按 CSS 规则缩进、空行、大括号对齐
• 若只格式化文档整体（Shift + Alt + F），Prettier 也会一并处理 和 <script></script> 区块，无需额外配置

为什么保存时不自动格式化

开了 editor.formatOnSave 却没反应，大概率是三个地方之一出了问题：

• editor.formatOnSave 必须写在项目级 .vscode/settings.json 中，用户级设置会被覆盖
• 检查是否启用了 "editor.codeActionsOnSave": { "source.fixAll": true } —— 这是 ESLint 的自动修复开关，和 Prettier 抢着改代码，导致抖动或静默失效
• 确认 prettier.requireConfig 设为 true：否则 Prettier 会忽略你的 .prettierrc，退回到内置默认规则（比如双引号、无分号）

复杂点在于：Vue 单文件组件里，、<script></script>、 是三套解析逻辑，缺一个语言绑定，对应区块就原地躺平；而 <script setup></script> 还要求 Prettier ≥ 2.8.0，旧版本直接跳过。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！