解决 Prettier 2.6.2 对 HTML 代码的意外修改-html教程-PHP中文网

解决 Prettier 2.6.2 对 HTML 代码的意外修改

霞舞

发布： 2025-09-13 20:50:02

原创

933人浏览过

解决 prettier 2.6.2 对 html 代码的意外修改

在本文中，我们将解决在使用 Prettier 2.6.2 版本格式化 HTML 代码时遇到的意外修改问题，重点介绍 htmlWhitespaceSensitivity 选项的作用，并提供通过命令行或配置文件设置该选项的详细步骤，从而避免不必要的代码格式化问题，确保 HTML 代码的稳定性和可读性。

Prettier 是一款流行的代码格式化工具，但在某些情况下，其默认行为可能会导致对 HTML 代码进行不必要的修改。例如，在 Prettier 2.6.2 版本中，可能会出现将 HTML 标签的闭合尖括号移动到下一行的情况，影响代码的可读性。

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

登录后复制

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

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

登录后复制

这种修改通常是因为 Prettier 默认的 HTML 空格敏感度设置导致的。为了解决这个问题，我们可以使用 htmlWhitespaceSensitivity 选项。

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

htmlWhitespaceSensitivity 选项的作用

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

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

当设置为 ignore 时，Prettier 将忽略 HTML 中的空格，从而避免不必要的格式化修改。

如何设置 htmlWhitespaceSensitivity 选项

图改改

在线修改图片文字

455

查看详情

有两种方法可以设置 htmlWhitespaceSensitivity 选项：

命令行

在运行 Prettier 命令时，可以使用 --html-whitespace-sensitivity 参数来指定该选项的值。例如：

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

登录后复制

这将告诉 Prettier 在格式化 HTML 文件时忽略空格。

.prettierrc.json 配置文件

可以在 .prettierrc.json 文件中设置 htmlWhitespaceSensitivity 选项。例如：

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

登录后复制

将 htmlWhitespaceSensitivity 设置为 "ignore" 后，Prettier 将在每次格式化 HTML 文件时都忽略空格。

注意事项

根据项目需求选择合适的 htmlWhitespaceSensitivity 值。如果 HTML 中的空格对渲染结果有影响，则不应该设置为 ignore。
建议将 htmlWhitespaceSensitivity 选项添加到 .prettierrc.json 文件中，以便在整个项目中保持一致的格式化规则。

总结

通过设置 htmlWhitespaceSensitivity 选项，我们可以控制 Prettier 如何处理 HTML 中的空格，从而避免不必要的格式化修改。在遇到 Prettier 对 HTML 代码进行意外修改时，可以尝试将 htmlWhitespaceSensitivity 设置为 ignore，以解决问题。通过本文的介绍，希望能够帮助开发者更好地使用 Prettier 格式化 HTML 代码，提高开发效率。

以上就是解决 Prettier 2.6.2 对 HTML 代码的意外修改的详细内容，更多请关注php中文网其它相关文章！