必须将格式化行为嵌入开发者日常路径：vs code 项目级配置写死在 .vscode/settings.json，显式声明 tabsize、formatonsave 等；prettier 的 htmlwhitespacesensitivity 必须设为 "css"；husky pre-commit 钩子执行 --write 而非 --check；.editorconfig 需明确 [*.html] 块并与 .prettierrc 对齐。
靠文档和开会推不动，必须让格式化行为嵌入开发者每天必走的路径里——保存即生效、提交即拦截、CI 卡住不合规范的 PR。
VS Code 项目级配置必须写死在 .vscode/settings.json
不依赖个人设置，新成员 clone 后开箱即用才是真落地：
-
"editor.tabSize": 2和"editor.insertSpaces": true必须显式声明，禁用 Tab 混用 -
"editor.formatOnSave": true是基础，但还不够——得关掉 VS Code 内置 HTML 格式化："html.format.enable": false - 明确指定默认格式器：
"editor.defaultFormatter": "esbenp.prettier-vscode"，插件 ID 错一个字符都不生效 - 加一句
"editor.disableDefaultKeybindings": true，防本地快捷键覆盖团队规则
prettier 配置不能只靠默认值，htmlWhitespaceSensitivity 必须设为 "css"
设成 "strict" 看似“更严谨”，实际会破坏渲染逻辑：
- Vue/React 模板中内联写法（如
<div> <span>文本</span><button>点我</button> </div>）被强行拆行，触发inline-block元素间默认间隙 - Nunjucks 或 PHP include 的 HTML 片段因空格重排，导致
trim()后首尾内容丢失 -
.prettierrc里必须显式写："htmlWhitespaceSensitivity": "css"，不能省略 - 顺带配好
"printWidth": 100和"singleAttributePerLine": false，避免长属性挤成一行或过度拆分
husky pre-commit 钩子必须执行 --write，不是 --check
只校验不修复，等于把问题留在本地、污染提交历史：
- 在
package.json中定义脚本："format:staged": "lint-staged"，再配lint-staged对暂存区 HTML 执行prettier --write - husky 命令必须是
npx lint-staged，不是npx prettier --check——后者只报错，不改文件 - CI 流程里才用
--check做兜底，但本地提交前就得确保格式干净 - 忽略文件要显式声明：
"ignore": ["**/ie-legacy.html", "**/templates/**"]，防止 Prettier 破坏条件注释或模板引擎语法
.editorconfig 和 .prettierrc 缩进必须对齐，否则 Git diff 里全是空格战争
编辑器输入行为和保存输出行为不一致，是团队空格冲突的根源：
-
.editorconfig中必须有明确块：[*.html]\nindent_style = space\nindent_size = 2，不能只写[*] -
.prettierrc中对应项："tabWidth": 2、"useTabs": false - VS Code 设置里关掉
editor.detectIndentation，否则它会偷偷覆盖.editorconfig - 验证是否生效：新建
test.html，按 Tab 键——必须插 2 个空格，且右下角状态栏显示Spaces: 2
真正卡住落地的，从来不是工具难装，而是 .editorconfig 少写了 [*.html]，或是 husky 钩子里漏了 --write。这些地方一旦松动，三天后 Git diff 就全是空格变更，没人再信“规范”二字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
