团队协作下的HTML代码质量规范建设方案-html教程-PHP中文网

真正提升html协作效率的关键在于可落地的约束机制：必须配置eslint-plugin-html的overrides规则、启用prettier-plugin-attributes排序属性、统一引号与自闭合标签风格，并在ci中直接扫描源码而非构建产物。

团队协作下的html代码质量规范建设方案

团队协作中，HTML 代码质量不靠个人自觉，靠可落地的约束机制。没有校验、没有统一入口、没有错误反馈闭环，规范就是废纸。

很多人装了插件但 eslint 始终不检查 HTML 中的 JS 或属性拼写，根本原因是没配解析器链。它默认只处理 .js 文件，对 .html 文件无感知。

必须在 .eslintrc.js 中显式声明 overrides，把 files: ["*.html"] 和 processor: "html/html" 配上
parserOptions 要设 sourceType: "module"，否则内联 <script type="module"></script> 会报错
禁用 no-unused-vars 在 HTML 模板里——v-for、ng-repeat 的变量会被误判

示例关键配置片段：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

overrides: [{
  files: ["*.html"],
  processor: "html/html",
  rules: {
    "no-unused-vars": "off",
    "html/indent": ["error", 2]
  }
}]

开箱即用的 prettier 默认不格式化 HTML 属性顺序，也不强制闭合标签风格（如 <br> vs <br>），容易引发 diff 冲突。

加 prettier.config.js，启用 htmlWhitespaceSensitivity: "css" 避免换行误删
用 prettier-plugin-organize-imports 不管用——它只理 JS；HTML 属性排序得靠 prettier-plugin-sort-imports 的兄弟项目 prettier-plugin-attributes（需手动安装）
团队必须统一 singleQuote: true 和 htmlSelfClosingTag: true，否则 <img src="x"> 和 <img src="x"> 会反复来回变

常见原因是本地运行的是开发时的热更新服务（如 Vite dev server），它自动注入 HMR 脚本、补全 <base>、甚至重写 <link>，而 CI 执行的是原始文件 lint，二者输入不一致。

CI 脚本里必须用 eslint --ext .html,.js src/ 直接扫描源码，别依赖构建产物
排除 node_modules 和 dist 是基础，但更要排除自动生成的 index.html（比如 Webpack 插件产出的）——这类文件不该进 Git，应加进 .eslintignore
如果用了 html-webpack-plugin，它的模板语法（）会让 eslint-plugin-html 解析失败，得在 processor 配置里加 html: { customSyntax: "html" } 并禁用相关规则