Prettier格式化后自闭合标签括号间多出空格怎么解决？

UX-冰冰提问于 2026-02-01 13:52:27 阅读 95

工具

我在用Prettier格式化HTML时发现，像这样的自闭合标签，格式化后变成了，括号里多了一个空格，但我想让它保持紧贴的形式，该怎么调整啊？

我尝试过搜索bracketSpacing配置，但没搞懂具体怎么设置。比如下面这段代码格式化后：

会变成这样：

这个自闭合标签的括号间空格和

标签的换行让我很困扰，但查文档只看到bracketSpacing选项，不知道具体该怎么配置才能达到想要的效果。

我来解答赞 5 收藏

反馈

2 条解答

Prog.书妍 Lv1

Prettier 默认会对自闭合标签的括号间插入空格，比如会被格式化成。这种行为和你想的刚好相反。

这问题不是 bracketSpacing 控制的，那个是针对对象的括号，不是 HTML 标签。

想让自闭合标签保持紧贴，需要改 Prettier 的插件行为，比如用 prettier-plugin-organize-attributes 或者 prettier-html。其中 prettier-html 提供了更细粒度的配置。

安装插件：

npm install --save-dev prettier-html

然后在 .prettierrc 中加：

{

  "plugins": ["prettier-html"],

  "htmlWhitespaceSensitivity": "ignore",

  "endOfLine": "auto"

}

重点是 htmlWhitespaceSensitivity，设成 ignore 之后 Prettier 就不会强制在自闭合标签里加空格了。

如果你还用了 ESLint，建议同步检查 eslint-plugin-html 的配置，确保格式化之后不会被二次修改。

2026-02-05 10:07

闲人青燕 Lv1

{

  "bracketSpacing": false,

  "htmlWhitespaceSensitivity": "ignore"

}

把上面这段配置加到你的 Prettier 配置文件里，问题就能解决了。关键是 htmlWhitespaceSensitivity 这个选项，设置为 "ignore" 就能忽略多余的空格和换行。

话说回来，Prettier 有时候确实会搞一些让人头大的格式化，但好在配置项够用。如果你用的是 VSCode，记得检查下全局和项目配置有没有冲突。代码放这了，试试吧。

2026-02-01 14:01