统一团队风格的HTML代码质量与格式化实战-html教程-PHP中文网

vs code 保存时 html 不自动格式化，需关闭内置格式化、设 prettier 为默认格式化工具、启用 formatonsave；调整 htmlwhitespacesensitivity 和 wraplinelength；用 .editorconfig 统一缩进；ci 中需显式指定 glob 路径并验证。

统一团队风格的html代码质量与格式化实战

VS Code 保存时 HTML 不自动格式化？检查这三项配置

根本原因不是插件没装，而是 VS Code 没把 prettier 设为 HTML 的默认格式化工具。很多人只装了插件却漏掉关键绑定。

打开 .vscode/settings.json，确认含以下配置：
```
"html.format.enable": false,
```
——必须关掉内置 HTML 格式化，否则和 Prettier 冲突

添加：

"editor.defaultFormatter": "esbenp.prettier-vscode"

（注意插件 ID 要准确）

确保 editor.formatOnSave 为 true，且该设置未被工作区或用户级配置覆盖

`prettier` 对 HTML 标签换行太激进？调 `htmlWhitespaceSensitivity`

默认值 "css" 会让 Prettier 尽量保留空白以兼容 CSS white-space 行为，但容易把简单标签（如 <span></span>）强行拆成多行，破坏内联语义。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

若项目大量使用内联元素，改用：
```
"htmlWhitespaceSensitivity": "strict"
```
—— 更保守，只在必要处换行
配合 "html.format.wrapLineLength": 120（而非默认 80），避免短标签被无谓折行
对需原样保留的标签，用 unformatted 列表排除：
```
"html.format.unformatted": ["code", "pre", "textarea"]
```

团队成员缩进不一致？`.editorconfig` 比编辑器设置更可靠

VS Code 用户级缩进设置会被覆盖，而 .editorconfig 是项目级强制规则，Git 提交时就能拦截混用 Tab/空格的文件。

根目录必须有 .editorconfig，且包含：

[*.html]\nindent_style = space\nindent_size = 2

别只写 [*] 全局规则——HTML 文件可能被其他语言规则覆盖，显式声明 [*.html] 才生效
验证是否生效：新建一个 test.html，按 Tab 键，应直接插入 2 个空格，而非制表符

CI 流程里 Prettier 检查总失败？先确认 `--list-different` 路径匹配

本地跑 npx prettier --check "**/*.html" 成功，但 CI 报“no files found”，大概率是 glob 路径没适配 CI 环境的工作目录结构。

CI 中常用 npm run format:check，对应脚本应写为：
```
"format:check": "prettier --check \"src/**/*.html\" \"public/**/*.html\""
```
—— 显式限定路径，避免依赖 shell 展开
CI 容器中 Node 版本较低时，** 可能不被支持，降级用 src/*/**/*.html
检查 Git 忽略文件（.gitignore）是否误 exclude 了 HTML 模板目录，导致 Prettier 扫不到文件

真正卡住团队的从来不是工具选型，而是 .editorconfig 里少写一行 [*.html]，或是 CI 脚本里 glob 路径没加引号。这些点不手动验证，光靠文档说明根本挡不住实际提交时的报错。