Prettier 格式化 HTML 时 Head 标签闭合异常问题及解决方案-html教程-PHP中文网

Prettier 格式化 HTML 时 Head 标签闭合异常问题及解决方案

心靈之曲

发布： 2025-09-13 20:57:01

原创

753人浏览过

prettier 格式化 html 时 head 标签闭合异常问题及解决方案

Prettier 是一款流行的代码格式化工具，能够自动调整代码风格，提高代码一致性和可读性。然而，在处理 HTML 代码时，有时会出现一些意想不到的问题，例如 head 标签被提前闭合。

<html>
  <head>
    <title>X</title>
  </head><!-- ddd --->
  <body></body>
</html>

登录后复制

经过 Prettier 格式化后，可能变成：

<html>
  <head>
    <title>X</title></head
  ><!-- ddd --->
  <body></body>
</html>

登录后复制

这种格式化错误会导致 HTML 结构混乱，影响页面渲染。解决此问题的关键在于 htmlWhitespaceSensitivity 选项。

htmlWhitespaceSensitivity 选项详解

htmlWhitespaceSensitivity 控制 Prettier 如何处理 HTML 中的空格。它有三个可选值：

立即学习“前端免费学习笔记（深入）”；

css (默认值): 根据 CSS display 属性处理空格。
strict: 空格被认为是重要的。
ignore: 空格被认为是无关紧要的。

默认情况下，htmlWhitespaceSensitivity 的值为 css，这意味着 Prettier 会根据 CSS 的 display 属性来决定是否保留空格。在某些情况下，这会导致 head 标签被错误地闭合。

解决方案：设置为 ignore

要解决 head 标签被提前闭合的问题，可以将 htmlWhitespaceSensitivity 设置为 ignore。这样，Prettier 会忽略 HTML 中的空格，从而避免出现格式化错误。

神卷标书

神卷标书，专注于AI智能标书制作、管理与咨询服务，提供高效、专业的招投标解决方案。支持一站式标书生成、模板下载，助力企业轻松投标，提升中标率。

查看详情

方法一：命令行参数

在运行 Prettier 时，可以使用 --html-whitespace-sensitivity ignore 参数：

prettier --write --html-whitespace-sensitivity ignore "./src/**/*.{ts,html,scss}"

登录后复制

方法二：配置文件 .prettierrc.json

在 .prettierrc.json 文件中添加以下配置：

{
  "singleQuote": true,
  "trailingComma": "es5",
  "endOfLine": "auto",
  "bracketSpacing": true,
  "printWidth": 120,
  "htmlWhitespaceSensitivity": "ignore"
}

登录后复制

总结

通过将 htmlWhitespaceSensitivity 设置为 ignore，可以有效避免 Prettier 在格式化 HTML 代码时 head 标签被提前闭合的问题。建议在处理 HTML 代码时，始终将此选项设置为 ignore，以确保代码的结构完整性和可读性。另外，及时更新 Prettier 版本，关注官方文档，可以获取最新的配置信息和最佳实践。

以上就是Prettier 格式化 HTML 时 Head 标签闭合异常问题及解决方案的详细内容，更多请关注php中文网其它相关文章！