vs code 中 html 自动格式化需 prettier + editorconfig 双配置：prettier 处理语义级格式（标签换行、属性排序、自闭合写法），editorconfig 统一基础编辑行为（indent_size=2、lf 换行、去尾空格）；必须启用 formatonsave 并设 prettier 为默认格式化器，且 .prettierrc 中需含 "htmlwhitespacesensitivity": "css" 避免内联布局破坏；git hooks（husky + lint-staged）在 pre-commit 执行 prettier --check 和 htmlhint 语义检查，阻断不合规提交；交付物含 .prettierrc、.editorconfig、.htmlhintrc 三文件及 readme 中 npm install 和 code . 两行命令，确保新人开箱即用。
HTML代码风格指南不是贴在wiki上的装饰品，它必须能被编辑器自动执行、被CI拦截、被新成员一键复用——否则就是废纸。
VS Code 里怎么让 HTML 自动按规范格式化
靠人眼对齐缩进、手动补闭合标签、检查属性顺序，效率低还容易漏。核心是 Prettier + EditorConfig 双配置：
-
Prettier负责语义级格式：标签换行、属性排序（id→class→data-→src等）、自闭合标签写法（<img>而非<img>） -
.editorconfig负责基础编辑行为：统一indent_size = 2、end_of_line = lf、trim_trailing_whitespace = true，避免不同系统换行符或空格污染 Git diff - VS Code 必须开启
"editor.formatOnSave": true，且默认格式化工具设为Prettier；否则配置再全也白搭
常见坑：.prettierrc 里没加 "htmlWhitespaceSensitivity": "css"，会导致 <div><span>text</span></div> 被错误折行破坏内联布局。
如何用 Git Hooks 拦住不合规的 HTML 提交
仅靠保存格式化不够——有人会关掉插件，或直接改 dist 文件。必须在提交前强制校验：
- 用
Husky+lint-staged组合，在pre-commit钩子中跑npx prettier --check "**/*.html" - 配合
HTMLHint做语义检查：比如强制<img>必须有alt，<a></a>必须有href，避免静态扫描漏掉的可访问性问题 - 注意：不要把
prettier --write放在 pre-commit 里自动修复——这会让提交内容和开发者本地文件不一致，引发协作混乱
真实报错示例：error: src/index.html: Property "alt" is missing on element "img"，这类提示比 Code Review 时口头提醒管用十倍。
团队新人第一天就能用上的配置交付物
不能指望新人自己去查文档配插件。交付物必须是开箱即用的：
- 项目根目录放好
.prettierrc（含"htmlWhitespaceSensitivity": "css"）、.editorconfig、.htmlhintrc三个文件，全部 commit 进主干 -
README.md里只写两行命令：npm install和code .—— VS Code 检测到这些配置文件后会自动提示安装 Prettier 插件 - 禁止在
.gitignore里忽略.vscode/目录：里面存的settings.json可以固化"editor.defaultFormatter": "esbenp.prettier-vscode"，避免每人重配
最常被忽略的细节：团队里有人用 WebStorm 或 Vim，.editorconfig 能跨编辑器生效，但 Prettier 插件必须各自安装——这点必须写进新人指引，而不是等他提 PR 被 CI 打回来才说。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
