TS文件中'JSX' is not defined错误的解决求助

解决TS文件中"'JSX' is not defined" ESLint报错的方案 #

以下是针对你配置的几个有效修复步骤：

1. 补充TypeScript React专属ESLint规则集 #

你的配置中缺少针对TypeScript React的标准化规则扩展，建议在extends中添加airbnb-typescript（适配Airbnb规范的TS版本）和@typescript-eslint的推荐规则，修改后的extends部分如下：

extends: [
  'airbnb',
  'airbnb-typescript', // 需先安装 eslint-config-airbnb-typescript
  'plugin:@typescript-eslint/recommended',
  'plugin:jest/recommended',
  'jest-enzyme',
  'plugin:react-hooks/recommended'
],

前置依赖安装：执行命令安装所需包

npm install eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

2. 修正tsconfig.json的JSX编译配置 #

确保tsconfig.json的compilerOptions中jsx字段配置正确，让TypeScript自动识别JSX全局类型：

{
  "compilerOptions": {
    "jsx": "react-jsx" // React 17+推荐此配置，低版本可设为"react"
  }
}

3. 强化TS/TSX文件的全局变量声明 #

虽然你已在根级globals中声明了JSX，但可在overrides中针对TS文件再次明确，避免规则覆盖：

overrides: [
  {
    "files": ["*.ts", "*.tsx"],
    "rules": {
      "no-undef": 0,
    },
    "globals": {
      "JSX": "readonly"
    }
  },
],

4. 检查插件版本一致性 #

确保package.json中@typescript-eslint/parser和@typescript-eslint/eslint-plugin的版本完全一致，版本不匹配可能导致配置失效。

5. 重启ESLint服务 #

修改配置后，重启编辑器的ESLint服务（如VSCode中按Ctrl+Shift+P选择"ESLint: Restart ESLint Server"），确保新配置生效。

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