VS Code中React JSX报错无法消除且自动格式化失效的问题求助

核心报错解决 #

1. 适配React版本的导入设置 #

• 若使用React 17之前的版本：JSX编译依赖全局React对象，必须在文件顶部添加导入：

  import React from 'react';
  

• 若使用React 17及以上版本：官方JSX转换已无需显式导入React，但如果仍报错，需检查配置文件是否未同步更新。

2. 调整ESLint/TypeScript配置 #

• ESLint配置：在.eslintrc.js或.eslintrc.json中添加React版本自动检测，避免强制导入要求：

  module.exports = {
    // ...其他配置
    settings: {
      react: {
        version: 'detect'
      }
    }
  }
  

• TypeScript配置：修改tsconfig.json的jsx字段：
  • React 17+：设置为"jsx": "react-jsx"（自动引入JSX运行时）
  • 旧版本：设置为"jsx": "react"
    同时确保compilerOptions中没有过度严格的规则导致误报。

修复高亮与自动格式化问题 #

• 确保VS Code安装并启用了React JavaScript and TypeScript Nightly和ESLint官方插件，且更新到最新版本。
• 检查VS Code编辑器设置：
  • 开启editor.formatOnSave（快捷键Ctrl+,/Cmd+,搜索该选项并勾选）
  • 确认javascript.format.enable和typescript.format.enable处于启用状态
  • 若使用Prettier，安装Prettier - Code formatter插件，将editor.defaultFormatter设置为esbenp.prettier-vscode，并确保项目根目录有.prettierrc配置文件（若需要自定义规则）。
• 重启VS Code，清除插件缓存后重新加载项目。

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