如何在VSCode中将格式错乱的JSX代码恢复为正常格式

解决步骤 #

• 先确认文件语言模式匹配：检查文件后缀为.jsx/.tsx，如果是.js后缀，点击VSCode右下角的语言模式标识，选择JavaScript React关联对应语言模式。
• 调整VSCode基础格式化配置：按下快捷键Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开设置，搜索format on save勾选该选项，再搜索default formatter，选择内置的TypeScript and JavaScript Language Features作为JS/JSX的默认格式化工具。
• 先修正代码语法错误：你当前的代码存在明显语法问题，所有<标签起始符、</闭合标签起始符都被单独拆分为一行，格式化工具无法识别错误语法，需要先手动把所有拆分的标签拼接完整：
  比如错误写法

  <
  Navbar />
  

  要先修正为

  <Navbar />
  

  所有同类拆分的标签都修正完成后再执行格式化。
• 触发格式化操作：全选代码后按下快捷键Shift+Alt+F（Windows/Linux）或Shift+Option+F（Mac），也可以右键选择「格式化文档」执行操作。如果仍不生效，右键选择「格式化文档的方式」，手动指定TypeScript and JavaScript Language Features作为本次格式化的工具。
• 剩余异常排查：
  • 勾选设置项editor.formatOnType，输入完成按回车时会自动格式化当前行
  • 检查项目根目录的.prettierignore、.eslintignore文件，确认当前文件没有被加入忽略列表
  • 如果你之前用过Prettier等第三方格式化插件，删除项目根目录下的.prettierrc、.eslintrc等残留配置文件，避免配置冲突导致格式化失效

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