React+TypeScript项目npm start时ESLint解析错误求助

近期在React项目中安装了TypeScript和Jest，但执行npm start命令时，遇到一系列解析相关错误，提示TypeScript中的extends和as为意外令牌。以下是项目的配置文件：

Package.json（相关片段） #

{
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --max_old_space_size=8000 build",
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write \"**/*.{js,jsx,json,md,html,css,less,scss}\"",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "plugin:react/recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "plugins": [
      "@typescript-eslint"
    ],
    "parserOptions": {
      "ecmaVersion": 2020,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": true,
      "es6": true
    },
    "globals": {
      "$": true
    },
    "settings": {
      "react": {
        "version": "^17.0.1"
      }
    },
    "overrides": [
      {
        "files": [
          "*.ts",
          "*.tsx"
        ],
        "parserOptions": {
          "project": "./tsconfig.json"
        }
      }
    ],
    "rules": {
      "semi": [
        "error",
        "never"
      ]
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "moment": "2.29.1"
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.23.3",
    "@testing-library/jest-dom": "^6.1.5",
    "@testing-library/react": "12.1.5",
    "@types/jest": "^29.5.10",
    "@types/node": "^20.10.0",
    "@types/react": "^18.2.38",
    "@types/react-beautiful-dnd": "^13.1.7",
    "@types/react-dom": "^18.2.17",
    "@types/react-paginate": "^7.1.4",
    "@types/testing-library__react": "^10.2.0",
    "@typescript-eslint/eslint-plugin": "^6.13.1",
    "@typescript-eslint/parser": "^6.13.1",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-react": "^7.20.6",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "prettier": "^2.1.1",
    "ts-jest": "^29.1.1",
    "ts-node": "^10.9.1",
    "typescript": "^5.3.2"
  }
}

tsconfig.json #

{
  "compilerOptions": {
    "target": "es2016",
    "jsx": "react",
    "module": "commonjs",
    "types": ["node", "jest", "@testing-library/jest-dom", "react", "react-dom"],
    "allowJs": true,
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": [
    "./dist/**/*",
    "node_modules"
  ],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
  }
}

.babelrc #

{
    "presets": [
        "@babel/preset-react",
        ["@babel/preset-env", { "targets": { "node": "current" } }],
        "@babel/preset-typescript"
      ],
      "plugins": ["@emotion"]
}

已搜索相关帖子尝试解决，但现有方案未能解决该问题。

可能的解决步骤 #

1. 修正tsconfig.json配置

   • 移除文件中多余的parserOptions字段（这是ESLint的配置，不属于tsconfig）
   • 将compilerOptions中的module改为esnext，适配react-scripts的ES模块解析逻辑
   • 若使用React 17+，将jsx改为react-jsx以启用新的JSX转换：

     "compilerOptions": {
       "target": "es2016",
       "jsx": "react-jsx",
       "module": "esnext",
       // ...其他保持不变
     }
     

2. 排查Babel配置冲突

   • react-scripts内置了完整的Babel配置，自定义的.babelrc可能导致解析逻辑冲突。尝试重命名.babelrc为.babelrc.backup，重启项目测试是否恢复正常。

3. 调整ESLint配置

   • 暂时移除eslintConfig中的overrides字段，简化配置后测试是否能正常解析TypeScript语法
   • 确保parserOptions.project指向的tsconfig.json路径正确，若项目根目录有多个tsconfig文件需调整对应路径

4. 清理依赖缓存

   • 执行以下命令清理缓存并重新安装依赖：

     npm cache clean --force
     rm -rf node_modules package-lock.json
     npm install
     

5. 检查react-scripts版本

   • 确保react-scripts版本≥4.0（支持TypeScript的最低版本），若版本过低，执行升级命令：

     npm install react-scripts@latest
     

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