Prettier与VS Code内置HTML格式化冲突源于双引擎并行：VS Code原生格式化（html.format.enable）与Prettier插件同时触发，导致缩进错乱、引号翻转、属性换行不一致；解决方式是禁用原生HTML格式化、明确指定Prettier为HTML语言默认格式化器，并统一项目级.prettierrc与.vscode/settings.json中的tabWidth和缩进设置。
为什么Prettier和VS Code内置HTML格式化会打架
VS Code默认启用html.format.enable后，再装Prettier插件，保存时可能触发两次格式化：一次走VS Code原生引擎，一次走Prettier，结果缩进错乱、引号翻转、属性换行不一致。这不是bug，是配置重叠导致的规则竞争。
典型现象：<div class="foo" id="bar">被格式成<div换行class="foo"再换行id="bar">，而团队约定是单行写完所有属性。
- 禁用VS Code原生HTML格式化：在
.vscode/settings.json里设"html.format.enable": false - 只保留Prettier为唯一格式化入口，避免双引擎并行
- 确认
editor.defaultFormatter明确指向esbenp.prettier-vscode，不要留空或指向其他插件
如何让不同成员的VS Code强制使用同一套HTML规则
光靠个人设置不行——有人开、有人关，有人改缩进为4空格，有人坚持2空格。真正生效的是项目级配置+编辑器级锁定。
- 在项目根目录放
.prettierrc，内容必须包含"tabWidth": 2、"singleQuote": false等关键项（别只写注释） - 在
.vscode/settings.json中硬编码"editor.tabSize": 2和"editor.insertSpaces": true，覆盖用户全局设置 - 加
"editor.formatOnSave": true，但**必须配合"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}语言专属配置**，否则JS/TS文件也会被误用HTML规则
EditorConfig和Prettier规则冲突怎么办
.editorconfig管基础编辑行为（如换行符、末尾空行），.prettierrc管代码结构（如属性顺序、嵌套深度）。两者不该重叠，但常有人在.editorconfig里写indent_size = 4，又在.prettierrc里写"tabWidth": 2，结果保存时Prettier按2空格缩进，EditorConfig却强制4空格——编辑器实际执行以Pretterrc为准，但会报“conflict detected”警告。
立即学习“前端免费学习笔记（深入）”；
-
.editorconfig里删掉所有与缩进相关的行（indent_style、indent_size），只留end_of_line、insert_final_newline等跨语言通用项 - Prettier的
"tabWidth"值必须和.vscode/settings.json里的"editor.tabSize"严格一致，否则光标定位和自动补全会偏移 - 验证方式：新建空白
test.html，输入<div><p>foo</p></div>，保存后看是否按预期缩进两层，且无警告弹窗
Git提交前格式化失效的常见断点
Husky + lint-staged配置看似完整，但prettier --write经常漏掉HTML文件，或者只处理src/**/*.html却忽略public/index.html这类根目录文件。
- 检查
lint-staged配置是否包含"*.html"，而不是只写"*.js"或"**/*.html"（后者在某些shell下不展开） - 确保
prettier命令能识别HTML：运行npx prettier --list-different "**/*.html"，有输出说明规则生效；没输出可能是glob匹配失败 - CI流程中Prettier检查失败，大概率是CI环境没装Node.js依赖，或
.prettierrc路径不在工作目录下——把配置文件放在package.json里内联写更可靠
最易被忽略的点：团队里有人用Mac、有人用Windows，end_of_line设成lf后，Windows用户保存文件时编辑器可能仍插入crlf，导致diff里全是换行符变更。必须靠.editorconfig的end_of_line = lf + Git的core.autocrlf=input双重锁定。
