VS Code中Shift+Alt/CTRL+F格式化React内嵌HTML出现异常如何解决

问题原因 #

1. 格式化器不支持JSX语法：VS Code内置的原生JS格式化工具默认无法识别.js文件内的JSX标签，会将其当作普通JS代码处理，直接导致格式错乱。
2. 误操作切换了默认格式化器：你按下的Shift+Ctrl+F是VS Code默认全局搜索快捷键，部分场景下如果同时安装了多个格式化插件，该操作可能触发格式化器选择弹窗，误选了不支持JSX的格式化工具作为默认选项，结合开启的保存自动格式化功能，每次保存都会触发错误格式化。
3. 缺少JS文件的JSX解析配置：即便安装了支持JSX的格式化工具（如Prettier），如果没有单独配置开启JS文件的JSX解析能力，也会出现该问题。

编辑阶段代码状态：

保存后格式异常效果：

解决步骤 #

• 安装兼容JSX的格式化插件
  优先安装VS Code插件市场的Prettier - Code formatter，该插件原生支持JSX语法格式化，是React开发的常用格式化工具。
• 切换默认格式化器
  打开任意.js后缀的React代码文件，右键点击编辑空白区域，选择「使用...格式化文档」，在弹出的格式化器列表中选中Prettier，勾选将其设置为.js文件的默认格式化器。
• 配置JS文件的JSX解析规则
  打开VS Code设置面板（快捷键Ctrl+,），搜索Emmet: Include Languages，点击添加项，左侧输入javascript，右侧输入javascriptreact，确保Emmet和格式化工具可以正确识别.js文件内的JSX语法。
  也可以在项目根目录新建.prettierrc配置文件，写入以下配置强制指定解析规则：

  {
    "parser": "babel",
    "jsxSingleQuote": true,
    "trailingComma": "es5"
  }
  

• 校验保存格式化配置
  搜索设置项Format On Save确认已开启，再搜索Default Formatter，确认全局默认格式化器设置为esbenp.prettier-vscode，如果安装了其他格式化插件（如JS Beautify等）且不需要使用，可以直接卸载避免配置冲突。

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