TypeScript+React JSX项目ESLint配置报'JSX'未定义问题咨询

• 代码中chunkArray方法的参数定义直接使用了JSX.Element类型，基础ESLint的no-undef规则无法识别TypeScript提供的全局JSX类型，会将其判定为未定义的变量，从而触发报错。
• 当前ESLint配置未适配TypeScript+React JSX的开发场景，未使用TypeScript专用的ESLint解析器，也没有配置对应规则识别TS的全局类型定义。

提供两种可选解决方式，优先推荐方案1，改动量最小：

方案1：调整类型引用（仅修改业务代码） #

将代码中的JSX.Element替换为React.JSX.Element，因你已经导入了React命名空间，直接调用命名空间下的JSX类型即可避开全局类型识别的问题：

// 修改前
chunkArray(array: JSX.Element[], width: number) {
// 修改后
chunkArray(array: React.JSX.Element[], width: number) {

方案2：调整ESLint配置（彻底解决同类问题） #

如果后续需要频繁使用全局JSX类型，可以修改ESLint配置适配TS开发环境：

1. 先安装必要的依赖包：

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --save-dev

2. 修改你的ESLint配置文件（.eslintrc.js或.eslintrc.json），新增以下配置项：

module.exports = {
  parser: '@typescript-eslint/parser', // 指定使用TS专属解析器
  parserOptions: {
    ecmaFeatures: {
      jsx: true // 开启JSX语法支持
    }
  },
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  settings: {
    react: {
      version: 'detect' // 自动识别当前项目的React版本
    }
  },
  rules: {
    'no-undef': 'off', // 关闭原生no-undef规则，改用TS版本的同规则
    '@typescript-eslint/no-undef': 'error'
  }
}

如果使用React17及以上版本的新JSX转换逻辑，可以在extends数组中额外添加plugin:react/jsx-runtime，避免ESLint强制要求每个JSX文件导入React。

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