如何禁止Prettier在JSX代码中自动添加{" "}格式内容

云上老周

2026-10-2

Prettier自动添加{" "}问题解决方案

问题原因

Prettier插入{" "}是为了保留JSX中换行行内元素之间的原生空格，避免元素原本的间距消失导致样式异常。默认情况下JSX会忽略标签之间换行产生的空格，如果你代码里的两个行内元素是分行写的，Prettier就会主动插入这段代码来保留浏览器默认的空格间距。

方案1：调整代码写法避免触发
把需要并排的行内元素写在同一行，不要换行，Prettier就不会自动插入{" "}。
方案2：修改Prettier全局配置
在你的Prettier配置文件（.prettierrc、prettier.config.js等）中添加如下配置：
```
"htmlWhitespaceSensitivity": "ignore"
```
该配置会关闭Prettier对HTML/JSX空格的敏感校验，不会再自动插入空格保留代码。注意该配置全局生效后，所有JSX换行产生的空格都会被忽略，你需要自行控制元素之间的间距，避免原有样式出错。
方案3：局部禁用Prettier格式化
如果只需要个别代码块不触发该规则，可以在对应代码块上方添加注释：
```
{/* prettier-ignore */}
<div>
  <a href="#">链接1</a>
  <a href="#">链接2</a>
</div>
```
这样注释下方的JSX代码块就不会被Prettier自动插入{" "}。