大厂HTML格式化核心是保障可维护性、可测试性与协作一致性，需严格配置prettier并配合eslint-plugin-jsx-a11y等工具进行语法、结构、渲染三层CI校验。
大厂标准的 HTML 格式化不是靠“多缩进几格”或“换行看起来舒服”来定义的——它本质是可维护性、可测试性与协作一致性的落地体现。不按规范写，CI 会报错，PR 会被拒，甚至影响 SSR 渲染顺序和无障碍（a11y）检测。
为什么 prettier 默认配置不能直接用于大厂项目
很多团队直接用 Prettier 的 .prettierrc 开箱即用，结果在代码扫描阶段被 eslint-plugin-jsx-a11y 或内部 lint 规则打回。根本原因在于：Prettier 只管格式，不管语义；而大厂关注的是「格式是否支撑语义正确」。
-
prettier允许<div><span>文本</span></div>换行成三行，但内部规则可能强制要求内联元素不得独占一行（避免意外空白符影响布局） -
jsxBracketSameLine: true在 React 项目中看似整洁，却会让aria-*属性被挤到同一行末尾，降低可读性，也违反部分团队的「关键 a11y 属性必须显式换行」约定 - 对
<img>标签，Prettier 不校验alt是否缺失，但大厂 CI 会用eslint-plugin-jsx-a11y直接报jsx-a11y/alt-text错误
必须手动覆盖的 4 个 Prettier 关键配置项
这些不是“可选优化”，而是上线前被门禁卡住的高频点。建议统一写进团队 .prettierrc：
-
htmlWhitespaceSensitivity: "strict"：防止因换行/空格导致 SSR 和 CSR 渲染出不同空白文本节点（尤其影响display: inline布局） -
endOfLine: "lf"：Windows 开发者容易忽略，但 Git 配置 + CI 容器默认为 Linux 环境，混用crlf会导致哈希不一致、diff 失效 -
printWidth: 80：不是为了“看着窄”，而是配合eslint-plugin-react的react/jsx-max-props-per-line规则做协同校验 -
jsxSingleQuote: true：和团队 ESLint 的quotes规则对齐，否则eslint --fix和prettier --write会互相覆盖
eslint-plugin-jsx-a11y 的真实拦截场景
这个插件不是“加个 alt 就完事”。它会在构建时静态分析 DOM 结构关系，以下写法哪怕格式再漂亮也会被标红：
立即学习“前端免费学习笔记（深入）”；
-
<button onClick={...}><img src="icon.svg" alt="" /></button>→ 报jsx-a11y/button-has-type和jsx-a11y/img-redundant-alt，因为空alt+ 无文字内容 + 父级 button 已有交互语义，属于冗余且易误导屏幕阅读器 -
<div role="button" tabIndex="0">点击</div>→ 报jsx-a11y/click-events-have-key-events，缺少onKeyPress，无法键盘触发 -
<label>姓名<input /></label>→ 不报错，但jsx-a11y/label-has-associated-control推荐显式用htmlFor+id，否则 SSR 下可能因 hydration 顺序导致绑定失败
CI 中真正卡点的 HTML 校验环节
本地跑通 npm run format ≠ 能过流水线。大厂 CI 通常分三层校验：
- **语法层**：用
html-validate扫描.html文件（如微前端子应用入口），检查是否含非法属性（如v-if出现在纯 HTML 模板里） - **结构层**：用
eslint+eslint-plugin-jsx-a11y扫描.tsx，重点校验role、tabIndex、父子关系是否合法 - **渲染层**：Playwright 启动真实浏览器，执行
page.accessibility.snapshot()，验证最终 DOM 树是否通过 ARIA Live Region、Name Computation 等规则
其中最容易被忽略的是第三层：JSX 写得再规范，如果 useState 初始值为空导致某段 HTML 条件渲染未挂载，snapshot 就会缺节点——而这种问题只在 E2E 阶段暴露。
