Prettier 格式化 HTML 时 Head 标签出现异常的解决方案-html教程-PHP中文网

Prettier 格式化 HTML 时 Head 标签出现异常的解决方案

碧海醫心

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

原创

173人浏览过

prettier 格式化 html 时 head 标签出现异常的解决方案

Prettier 是一款流行的代码格式化工具，旨在通过统一的代码风格提高代码可读性和可维护性。然而，在某些情况下，Prettier 的默认配置可能无法满足所有需求，甚至可能产生不符合预期的格式化结果。例如，在使用 Prettier 2.6.2 格式化 HTML 代码时，可能会遇到 head 标签的闭合位置发生改变的情况，导致代码结构出现异常。

问题分析

这种异常行为通常与 HTML 中的空白处理有关。Prettier 默认情况下会根据 HTML 结构和标签之间的空白来调整格式。在某些特定情况下，这种处理方式可能会导致 head 标签的闭合位置发生错误，例如将 </head> 移动到 <title> 标签之后。

解决方案：调整 htmlWhitespaceSensitivity 配置

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

为了解决这个问题，我们可以通过调整 Prettier 的 htmlWhitespaceSensitivity 配置项来控制 HTML 中空白的处理方式。htmlWhitespaceSensitivity 选项控制 Prettier 如何处理 HTML、Vue 和 Angular 中的空格敏感度。

该选项有三个可选值：

css：(默认) 遵守 CSS 显示属性的默认值。
strict：空格被认为是敏感的。
ignore：空格被认为是不敏感的。

将 htmlWhitespaceSensitivity 设置为 "ignore" 可以告诉 Prettier 忽略 HTML 中的空白敏感性，从而避免 head 标签闭合位置发生改变的问题。

配置方法

可以通过以下两种方式配置 htmlWhitespaceSensitivity 选项：

命令行参数：

在运行 Prettier 命令时，添加 --html-whitespace-sensitivity ignore 参数：

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

39

查看详情
```
prettier --write "./src/**/*.{ts,html,scss}" --html-whitespace-sensitivity ignore
```
登录后复制
.prettierrc.json 配置文件：

在 .prettierrc.json 文件中添加 htmlWhitespaceSensitivity 选项：
```
{
  "singleQuote": true,
  "trailingComma": "es5",
  "endOfLine": "auto",
  "bracketSpacing": true,
  "printWidth": 120,
  "htmlWhitespaceSensitivity": "ignore"
}
```
登录后复制
建议使用配置文件的方式，以便在整个项目中保持一致的格式化规则。

示例

假设有以下 HTML 代码：

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

登录后复制

在未配置 htmlWhitespaceSensitivity 的情况下，使用 Prettier 格式化后，可能会得到以下结果：

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

登录后复制

可以看到，</head> 标签被移动到了 <title> 标签之后。

配置 htmlWhitespaceSensitivity: "ignore" 后，再次格式化，结果将保持原始结构：

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

登录后复制

总结

通过将 htmlWhitespaceSensitivity 设置为 "ignore"，可以有效避免 Prettier 在格式化 HTML 代码时 head 标签闭合位置发生改变的问题。这种方法简单易行，能够确保代码风格的一致性和可读性，提高开发效率。在实际项目中，建议根据具体需求选择合适的 htmlWhitespaceSensitivity 值，以达到最佳的格式化效果。

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