VS Code搭配Prettier格式化React代码时自动添加{""}如何解决

触发异常的原因 #

• 语法不规范：你在.js后缀文件中编写的JSX代码返回了多个未被根节点包裹的同级元素，且动态属性绑定未加{}包裹，不符合JSX语法规范，触发格式化工具的兼容处理逻辑。
• 格式化规则冲突：你的VSCode环境同时启用了多个JavaScript格式化工具（比如VSCode自带的JS格式化能力、ESLint自动修复、Prettier），多重规则叠加导致生成了非预期的冗余内容。
• 配置不匹配：如果你没有明确配置Prettier对JSX的解析规则，默认对.js文件的JSX语法识别可能出现异常，部分情况下htmlWhitespaceSensitivity参数设置为strict也会触发该问题。

插入的{""}的作用 #

该语法是JSX中的显式空字符串声明，原本的设计场景是在JSX换行排版时，强制声明此处无内容，避免浏览器将代码换行自动解析为空格、导致页面渲染出多余的视觉间隙。你当前场景下生成的{""}属于格式化冲突导致的冗余内容，无实际业务作用。

同类问题情况 #

这是VSCode+Prettier开发React项目的常见配置冲突问题，大量开发者在未正确配置格式化工具优先级、或JSX语法不规范时都会遇到同类异常。

修复步骤 #

• 修正JSX语法：返回多个同级元素时用React Fragment包裹，动态属性绑定添加{}，修正后的参考代码如下：

const AppOne = (prop) => {
  return (
    <>
      <img src={prop.path} />
      <br />
    </>
  );
}
export default AppOne;

• 指定唯一格式化工具：打开VSCode设置页，搜索Default Formatter，将JavaScript/JSX文件的默认格式化工具指定为esbenp.prettier-vscode，避免多工具规则冲突。
• 调整Prettier配置：在项目根目录新增.prettierrc配置文件，明确JSX解析规则，参考配置如下：

{
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "htmlWhitespaceSensitivity": "css",
  "parser": "babel"
}

• 统一ESLint规则（如果项目使用ESLint）：安装eslint-config-prettier包，禁用ESLint中与Prettier冲突的格式化规则，避免自动修复时修改Prettier格式化后的内容。

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