团队协作下HTML编码规范（Style Guide）的自动化落地-html教程-PHP中文网

Prettier 配置必须写进 .prettierrc 并提交至 Git，仅靠 VS Code 的 formatOnSave 设置无法保证团队统一；需显式声明 tabWidth、singleQuote（HTML 用双引号）、htmlWhitespaceSensitivity、endOfLine 等关键项，避免属性顺序混乱、CRLF 污染及格式不一致。

团队协作下html编码规范（style guide）的自动化落地

prettier 配置必须写进 .prettierrc，不能只靠编辑器设置

VS Code 里开 formatOnSave 只对当前用户生效，新人 clone 项目后若没手动启用 Prettier 插件，

 就可能变成 ，属性顺序一乱，diff 就全是噪音。真正的落地点是配置文件本身：

.prettierrc 必须提交到 Git，且至少包含 tabWidth: 2、singleQuote: false（HTML 属性强制双引号）、htmlWhitespaceSensitivity: "css"

不推荐用 printWidth: 100 处理 HTML：长 data-* 属性会被硬折行，破坏可读性；设为 80 或保留默认 80 更稳妥

endOfLine: "lf" 要显式声明，否则 Windows 用户提交的 CRLF 会污染 CI 流水线中的校验结果

stylelint 管类名，prettier 不管命名逻辑
很多人以为 prettier 能约束 btn-primary 还是 primary-btn，其实它完全不碰类名内容。真正起作用的是 stylelint 的 selector-class-pattern 规则：

在 .stylelintrc 中配 "^[a-z][a-zA-Z0-9-]*$"，直接拦截 BigRedBtn 或 user_name

配合 stylelint-selector-bem-pattern 插件可强制 BEM，但别全量启用——组件库可用，业务页面过度约束反而拖慢迭代
模板文件（如 _header.html）里预埋带注释的类名示例：，比口头培训管用

husky + lint-staged 必须限定 HTML 文件范围
git commit 时跑全量 prettier --write 很慢，尤其当项目混着 Vue/JSX，Prettier 会尝试解析 .vue 里的 template，报一堆无关错误。关键在 lint-staged 的匹配规则：

配置 "*.html": ["prettier --write"]，不要写成 "**/*.{html,htm}" —— 某些构建产物目录（如 dist/）下的 HTML 也会被误触
加一层保护：在 package.json 的 scripts 里定义 "prettier:check": "prettier --check \"src/**/*.html\""，CI 阶段只校验不修改
如果用了 eslint-plugin-html 做语义检查，记得把它和 prettier 分开运行——二者规则维度不同，混在一起容易漏报  缺 alt 这类问题

空行和注释必须参与自动化校验
空行不是“视觉舒适区”，而是模块边界的信号；注释也不是可有可无的说明，而是维护线索。这两项恰恰最难靠人工坚持，必须进工具链：

											
												
												
													财经HTML高端海报生成
													复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
												
												下载
												
											
										

Prettier 默认不处理空行逻辑，得用 prettyhtml 替代，或在 .prettierrc 加 "htmlWhitespaceSensitivity": "ignore" + 自定义插件
注释强制英文不是为了洋气，而是避免   在某些 Webpack loader 里因编码识别失败导致构建中断
关键 data-* 属性旁必须跟注释，例如 
；这类注释可用正则在 CI 中扫描，缺失即 fail实际落地最易被忽略的点：所有配置文件（.prettierrc、.stylelintrc、.editorconfig）必须出现在 git status 的 tracked 列表里。有人把它们加进 .gitignore，以为“配置是个人偏好”，结果团队永远在同步一套不存在的标准。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！