如何配置Prettier使其格式化后的React代码可正常运行

• 所有包含JSX语法的React组件文件统一使用.jsx后缀存储，避免Prettier默认按普通JavaScript语法规则解析，触发格式化错误
• 编辑器侧配置文件语言关联规则，以VS Code为例：
  1. 打开.jsx后缀文件，点击编辑器右下角的语言识别标签
  2. 在弹出的配置项中选择「JavaScript React」，可同步配置文件关联，将所有.jsx后缀文件默认绑定为JavaScript React语言模式
• 项目根目录添加.prettierrc配置文件，明确指定JSX解析规则，参考配置如下：

{
  "parser": "babel-jsx",
  "jsxSingleQuote": true,
  "bracketSameLine": true
}

• 配置完成后重启编辑器，重新保存文件即可正常格式化JSX代码

效果参考 #

保存文件后格式错误的初始状态：

修改为.jsx后缀后的效果：

切换为JavaScript React模式后的效果：

配置完成后的正常运行效果：

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