如何配置VSCode与Prettier扩展忽略React JSX元素的空格

问题核心 #

换电脑后新安装的Prettier扩展默认配置与旧项目配置不匹配，默认规则会自动将仅包含纯文本、整体长度未超出行宽阈值的JSX元素，合并为单行结构，覆盖手动编写的换行格式。

配置方案 #

项目级统一配置（推荐，解决全项目格式化异常） #

在项目根目录创建或修改 .prettierrc 配置文件，添加以下参数：

{
  "jsxWhitespaceSensitivity": "strict",
  "proseWrap": "preserve"
}

参数说明：

• jsxWhitespaceSensitivity 设为 strict：严格保留JSX元素内的手动换行与空格，禁止随意合并多行内容
• proseWrap 设为 preserve：保留JSX内文本的原有换行规则，不强制调整文本换行位置
  如果需要统一行宽阈值，可额外添加 printWidth 参数，例如 "printWidth": 120 表示单行最多容纳120字符。

VSCode扩展配置（避免新环境默认配置干扰） #

打开VSCode的用户设置（JSON格式），确认以下配置已添加：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true
}

其中 prettier.requireConfig 会让Prettier扩展强制读取项目根目录的配置文件，不会用扩展的默认参数覆盖项目配置，避免新电脑环境的配置偏差。

单元素临时保留格式（针对特殊自定义格式的场景） #

如果仅个别元素需要完全保留自定义结构，不需要调整全局配置，可在目标JSX元素上方添加忽略注释：

{/* prettier-ignore */}
<Card.Title>
   Company name (symbol)
</Card.Title>

添加注释后Prettier会完全跳过该元素的格式化操作。

内容的提问来源于stack exchange，提问作者Mr.J