为什么VS Code会在.js文件中出现JSX代码格式化错乱问题？

异常表现 #

格式化后JSX开标签被强制拆分换行：

return <
        div >

期望效果：

return <div>

解决方案 #

方案一：调整Prettier配置适配.js文件内的JSX语法 #

• 打开VS Code的settings.json配置文件，添加如下配置：

// 配置Prettier作为.js文件的默认格式化器
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
},
// 开启.js文件内的JSX语法识别
"prettier.jsxEnabled": true,
// 保证JSX开标签的尖括号和标签名同行
"prettier.jsxBracketSameLine": true,
// 关闭强制JSX括号单独换行的配置
"prettier.jsxBracketNewLine": false

• 若项目根目录有独立的.prettierrc配置文件，同步添加如下配置：

{
  "jsxBracketSameLine": true,
  "jsxBracketNewLine": false
}

• 配置完成后重启VS Code，重新格式化.js文件即可生效。

方案二：调整编译配置支持.jsx后缀 #

如果你更习惯用.jsx后缀存储React代码，可修改项目编译规则，避免.jsx文件编译报错：

• 找到项目的Babel或Webpack配置文件，修改babel-loader的文件匹配规则，将/\.js$/调整为/\.(js|jsx)$/，即可让编译工具识别.jsx文件。

验证 #

配置生效后，格式化React代码时JSX标签不会被强制拆分，会保留return <div>的正常格式。

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