为何Prettier会在React代码中添加奇怪的{" "}字符串？如何解决？

问题原因 #

Prettier默认开启JSX空格保留逻辑，当你代码中的标签与文本之间、行尾存在空格，且Prettier格式化时对代码做了换行处理，为了避免渲染时空格丢失，就会自动插入{" "}来显式标记空格。

解决方法 #

方案1：修改Prettier全局配置（推荐） #

在项目根目录的.prettierrc、.prettierrc.json或prettier.config.js配置文件中，添加以下配置项：

{
  "htmlWhitespaceSensitivity": "ignore"
}

该配置会让Prettier忽略JSX中的空格敏感度，不会自动为了保留空格生成{" "}。如果你用VS Code的Prettier插件，也可以在编辑器的settings.json中添加相同配置，全局生效。

方案2：调整代码写法 #

如果不想修改全局配置，可以手动删掉代码中不必要的空格，比如<li>和<span>之间的多余空格、行尾空格，格式化后就不会生成额外的{" "}。调整后的示例代码如下：

<ul>
  <li><span>npm start</span>: to start the project</li>
  <li><span>npm build</span>: to build the project</li>
</ul>

注意事项 #

将htmlWhitespaceSensitivity设为ignore后，如果你确实需要相邻标签之间保留空格，需要手动添加{" "}显式声明，否则渲染时空格会被自动移除。

内容的提问来源于stack exchange，提问作者Sanan Ali