创建JSX文件导入React报错，首次使用JSX需调整Lint设置吗？

从你提供的报错截图来看，错误提示为Parsing error: Unexpected token <，这是因为ESLint默认未启用JSX语法解析支持——你之前一直使用JS文件，首次创建JSX文件时需要调整Lint配置来适配，具体操作如下：

1. 安装React ESLint插件 #

先确保项目已安装eslint-plugin-react，如果没有，执行安装命令：

npm install eslint-plugin-react --save-dev

2. 修改ESLint配置文件 #

找到项目中的.eslintrc.js（或.eslintrc.json、.eslintrc），进行以下配置调整：

• 在plugins数组中添加react
• 在extends数组中加入plugin:react/recommended（基础React语法检查）
• 开启parserOptions里的jsx支持，同时配置React版本自动识别

示例配置（.eslintrc.js）：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  settings: {
    react: {
      version: 'detect' // 自动识别React版本
    }
  }
};

3. React 17+版本的优化配置 #

如果你的项目使用React 17及以上版本（支持无需导入React即可写JSX），可以进一步优化：

• 将extends中的plugin:react/recommended替换为plugin:react/jsx-runtime
• 在rules中关闭react/react-in-jsx-scope规则，避免不必要的导入提示

示例调整：

extends: [
  'eslint:recommended',
  'plugin:react/jsx-runtime'
],
rules: {
  'react/react-in-jsx-scope': 'off'
}

4. 确认文件扩展名 #

确保你的组件文件后缀是.jsx（如果用TypeScript则是.tsx），ESLint会根据扩展名自动切换解析逻辑。

完成以上配置后，重启编辑器的ESLint插件或项目的Lint服务，语法报错即可解决。

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