会冲突，因VS Code内置HTML格式器（html.format.enable=true）与Prettier争抢控制权；需禁用内置格式器并指定Prettier为HTML默认格式器，ESLint则仅校验script/style内JS代码。
VS Code 里 Prettier 和 ESLint 同时启用 HTML 格式化会冲突吗
会，而且冲突点很明确：html.format.enable 默认为 true，它会激活 VS Code 内置的 HTML 格式器；而 Prettier 要接管 HTML 格式化，就必须关掉这个开关。否则你保存 index.html，看到的是内置格式器的效果（比如属性不换行、缩进混乱），Prettier 完全不生效。
常见现象：右键“Format Document”弹出两个选项（Prettier 和 “Default Formatter”），选了 Prettier 也只格式化一次，下次保存又退回原样——本质是默认格式器没让权。
- 必须在
settings.json中显式关闭："html.format.enable": false - 同时确保
"editor.defaultFormatter": "esbenp.prettier-vscode"已设在"[html]"块内 - 不要依赖全局设置覆盖项目级行为；团队协作时，把配置写进项目根目录的
.vscode/settings.json更可靠
ESLint 能否直接格式化 HTML 文件
不能。ESLint 的核心能力是静态检查与修复 JavaScript/TypeScript 代码，对纯 HTML 文件（.html）无解析能力。即使你装了 eslint-plugin-html，它也只是把 HTML 中的 <script></script> 和 <style></style> 块抽出来交给 ESLint 处理，并不碰标签结构、属性顺序或缩进。
所以“HTML + ESLint 自动格式化”这个组合本身不成立——真正干活的仍是 Prettier（或内置格式器）。ESLint 在这里只做一件事：校验嵌入脚本的语法和风格，比如 <script>const a = 1;</script> 里有没有分号、引号类型是否合规。
立即学习“前端免费学习笔记（深入）”；
- 若想统一处理 HTML 中的 JS 片段，需配
eslint-plugin-html+eslint --fix，但仅限 script/style 内容 - HTML 标签层面的格式（如属性换行、嵌套缩进）必须由 Prettier 或编辑器内置格式器完成
- 二者共存时，建议用 Prettier 主导格式化，ESLint 专注报错和修复逻辑问题
为什么 .prettierrc 里 htmlWhitespaceSensitivity 必须设为 "css"
这个配置决定 Prettier 如何对待 HTML 中的空白字符。设成 "strict" 或 "ignore" 都可能破坏布局——尤其是当 CSS 依赖 white-space: normal 或 display: inline 元素间的空格时。
典型翻车场景：<p><img src="a.jpg" alt="HTML与Lint工具结合实现保存时自动格式化的配置" > text</p> 被格式化成两行后，img 和 text 之间空格消失，文字紧贴图片；或者 <span>A</span><span>B</span> 被强行折行，导致换行符被浏览器渲染为实际空格。
-
"htmlWhitespaceSensitivity": "css"让 Prettier 尊重 CSS 对空白的解释逻辑，保留必要的空格和换行 - 不要设为
"ignore"（忽略所有空白，易丢内容）或"strict"（过度保留，生成冗余空格） - 该值不影响属性换行、缩进等其他排版行为，只管文本节点与标签间的空白处理
Prettier 命令行格式化 HTML 文件时为何总失败
因为 Prettier 默认 parser 是 babel，遇到 .html 文件会直接跳过或报错 Invalid AST Node type。它不会自动根据扩展名切换 parser，必须人工指定。
正确命令长这样：prettier --write --parser html src/index.html。漏掉 --parser html 是 90% 的失败原因。
- 批量处理多个文件：
prettier --write --parser html "src/**/*.html"（注意引号防 shell 展开错误） - 配合
lint-staged使用时，脚本里也要带--parser html，否则 Git Hook 下照样不生效 - 如果用了自定义插件（如
@prettier/plugin-xml），需额外加--plugin参数，但纯 HTML 不需要
div 缩进。 
