如何使用自动化构建工具实现HTML格式化-html教程-PHP中文网

必须在settings.json中配置"[html]": {"editor.defaultformatter": "esbenp.prettier-vscode"}，禁用内置格式器（"html.format.enable": false），确保语言模式为html、.prettierrc存在且含printwidth:100和htmlwhitespacesensitivity:"css"，命令行格式化需加--parser html。

如何使用自动化构建工具实现html格式化

VS Code 保存时自动格式化 HTML 必须配 `[html]` 语言专属配置

只开 editor.formatOnSave 不够，VS Code 默认对 .html 文件可能调用内置格式器而非 Prettier。必须在 settings.json 中显式声明语言级默认格式器：

"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } 这一行不能省
确保已安装官方插件 esbenp.prettier-vscode（作者名必须匹配）
右下角状态栏确认文件语言模式是 HTML，不是 Plain Text 或 PHP
项目根目录需存在 .prettierrc（哪怕空文件），否则部分版本会忽略自定义规则

命令行批量格式化 HTML 必须加 `--parser html`

漏掉这个参数会导致 Prettier 把 .html 当作 JSX 或 Markdown 处理，常见症状包括：<img> 被改成 <img>、文本节点缩进错乱、<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 标签被错误闭合。

本地运行： npx prettier --write "src/**/*.html" --parser html
package.json 中推荐写法："format:html": "prettier --write \"src/**/*.html\" --parser html"
glob 模式必须用双引号包裹，避免 shell 提前展开失败
不要加 --html-whitespace-sensitivity ignore，它会破坏内联元素排版，仅模板引擎场景才考虑

CI/CD 流程中验证 HTML 格式化的最小检查脚本

自动化构建里不光要格式化，还要防“有人绕过格式化提交”。用 --check 做只读校验更稳妥：

CI 脚本中加入：npx prettier --check "src/**/*.html" --parser html
返回非零码即表示有未格式化文件，可直接阻断 PR 合并
搭配 prettier --list-different 可输出具体哪些文件不合规
注意：该检查依赖 .prettierrc 存在且与本地一致，否则 CI 和本地行为会不一致

和 ESLint 共存时 HTML 格式化失效的典型原因

ESLint 不处理 HTML，但它的 eslint-plugin-html 或 eslint-plugin-vue 可能劫持文件类型识别，导致 Prettier 完全不触发。

检查 VS Code 命令面板中 “Format Document With…” 列表，确认 Prettier 在 .html 上可用
禁用或调整 eslint-plugin-html 的 files 匹配范围，避免它把纯 HTML 文件当 JS 模块处理
若用 Vue 单文件组件，确保 <template></template> 块内 HTML 由 prettier-plugin-vue 处理，而非单独配 HTML 规则
不要在 .eslintrc 里写 rules: { 'prettier/prettier': 'error' } 对 HTML 文件——ESLint 根本不校验它