Prettier 的 htmlWhitespaceSensitivity 到底该怎么用？

端木梓希提问于 2026-03-21 12:37:21 阅读 54

工具

我在用 Prettier 格式化 Vue 组件时，发现 HTML 里的空格有时候被删掉导致样式错乱。查了文档说可以用 htmlWhitespaceSensitivity 配置，但我设成 "strict" 还是没效果，这是为啥？

我的 .prettierrc 是这样写的：

{
  "htmlWhitespaceSensitivity": "strict"
}

Prettier

我来解答赞 8 收藏

反馈

2 条解答

设计师佳佳 Lv1

我之前踩过这个坑，htmlWhitespaceSensitivity 这个配置确实容易让人迷惑。你现在的配置只改了 .prettierrc 文件是不够的，还得注意几点。

首先得确认 Prettier 版本是不是最新的，我就遇到过旧版本不生效的情况。然后呢，你的 Vue 文件里可能有些地方 Prettier 没法完全控制格式，比如内联样式或者复杂的模板表达式。

给你一个完整的配置参考吧，在 .prettierrc 里加上这些：

{

  "printWidth": 80,

  "tabWidth": 2,

  "useTabs": false,

  "htmlWhitespaceSensitivity": "strict",

  "vueIndentScriptAndStyle": true

}

还有个坑要注意，如果你用了 ESLint 和 Prettier 配合工作，记得安装 eslint-plugin-prettier 和 eslint-config-prettier 插件，不然格式化结果可能被覆盖。

最后提醒下，有时候 IDE 的插件缓存问题也会导致配置没生效，重启一下编辑器试试看。折腾了一圈下来，发现很多时候就是这些小细节在捣鬼。

2026-03-30 17:02

UE丶景荣 Lv1

htmlWhitespaceSensitivity 设置为 "strict" 应该会保留所有的空格，但有时候效果可能不如预期，尤其是嵌入式框架或者特定的模板语法里。你检查一下 Vue 组件中的空格是不是在某些特殊标签或者指令内？这些地方 Prettier 可能会有不同的处理方式。

另外，确保你的 Prettier 版本是最新的，有时候问题可能是由 bug 引起的。升级一下试试？

如果问题依然存在，可以尝试在你的编辑器插件设置里调整一下 Prettier 的配置，有时候全局和项目级别的配置会冲突。

最后，你也可以试试看把这个选项设置为 "ignore" 或 "css"，看看哪种更适合你的项目风格。有时候 "css" 能够更好地保留空格，尤其是在样式相关的 HTML 结构里。

记得保存修改后的 .prettierrc 文件后重新格式化文件，确保配置生效。希望这些能帮到你。

2026-03-21 13:07