大型项目怎么统一HTML格式化风格？团队规范制定-html教程-PHP中文网

必须用 .editorconfig 锁缩进、.prettierrc 定语义换行、husky 拦提交三者协同；vs code 需禁用内置 html 格式化并正确配置默认 formatter；htmlwhitespacesensitivity 应据场景选 "css" 或 "strict"；.editorconfig 须显式声明 [*.html] 且 indent_style=space、indent_size=2；ci 中 prettier --check 要用带引号的全路径 glob 并避开 .gitignore 过滤。

大型项目怎么统一html格式化风格？团队规范制定

大型项目统一 HTML 格式化风格，靠文档约定或口头提醒根本压不住——必须用 .editorconfig 锁缩进、.prettierrc 定语义换行、husky 拦提交，三者缺一不可。否则上线前合并 PR 时，diff 里全是空格和引号，真实修改被淹没。

VS Code 保存不格式化？先查这三项硬配置

不是插件没装，是 VS Code 默认绕过了 Prettier。团队成员各自设置不一致，导致有人保存就变样，有人完全无反应。

"html.format.enable": false 必须显式关闭内置格式化，否则它永远优先于 Prettier
"editor.defaultFormatter": "esbenp.prettier-vscode" 要写对插件 ID，拼错一个字母就静默失效
"editor.formatOnSave": true 得在项目级 .vscode/settings.json 里声明，不能只依赖用户全局设置

`htmlWhitespaceSensitivity` 设成 `"css"` 还是 `"strict"`？

设错会导致 <p><img>text</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 渲染出多余空白，或者把 <button>确认</button> 拆成三行，破坏内联语义。

"css"（默认）：按 CSS white-space 行为保留空白，适合含文本+行内元素的混合结构
"strict"：只在标签语法必需处换行，更适合纯组件模板（如 Vue/React 中的 JSX-like HTML）
别用 "ignore"：会吞掉有意义的空格，比如 <span>hello <em>world</em></span> 里原本的空格

为什么 `.editorconfig` 比 VS Code 设置更可靠？

VS Code 用户级设置会被覆盖，而 .editorconfig 是 Git 提交时就能生效的“物理规则”——哪怕有人删了 .vscode 文件夹，缩进照样锁死。

必须写 [*.html] 显式作用域，不能只写 [*]，否则其他语言规则可能覆盖 HTML 缩进
关键项：indent_style = space + indent_size = 2，禁用 Tab 的唯一可信方式
验证方法：新建 test.html，按 Tab 键，输出必须是 2 个空格，不是制表符

CI 里 `prettier --check` 总失败？路径和 glob 是最大雷区

本地跑通，CI 报 “No files matched”，90% 是 glob 路径没适配容器环境，或被 .gitignore 意外过滤。

脚本里必须显式写全路径："format:check": "prettier --check \"src/**/*.html\" \"public/**/*.html\""，不能只写 "**/*.html"
CI 容器 Node 版本低时，** 可能不支持，降级用 src/*/**/*.html
检查 .gitignore 是否误 exclude 了 templates/ 或 views/ 这类模板目录

真正卡住大型项目的，从来不是要不要用 Prettier，而是 .editorconfig 少写了 [*.html]，或是 CI 脚本里 glob 没加引号——这种细节，不在线上翻车一次，没人会真当回事。