使用Vite创建React项目后未修改App.tsx出现错误的解决咨询

用Vite创建了一个React示例应用，未修改App.tsx的情况下出现错误，已更新VS Code到1.85版本，附上了App.tsx和.eslintrc的截图。系统环境信息如下：

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i7-4510U CPU @ 2.00GHz
    Memory: 5.87 GB / 15.92 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE     
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD       
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD        
  Browsers:
    Edge: Chromium (120.0.2210.91)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    vite: ^5.0.8 => 5.0.10

结合Vite+React+TypeScript初始化项目的常见报错场景，按以下顺序排查：

1. 重置依赖安装 #

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json（或yarn.lock，根据你使用的包管理器选择）
• 重新安装依赖：

  npm install
  # 若用yarn则执行
  yarn install
  

2. 修复ESLint配置问题 #

Vite初始化项目的ESLint配置若存在规则冲突或依赖缺失，会导致报错：

• 检查.eslintrc的extends字段，确保包含必要规则集：

  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended"
  ]
  

• 若缺少ESLint插件，手动安装：

  npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react eslint-plugin-react-hooks
  

3. 验证TypeScript配置 #

检查tsconfig.json的compilerOptions是否符合Vite要求，默认配置应包含：

"compilerOptions": {
  "target": "ES2020",
  "useDefineForClassFields": true,
  "lib": ["ES2020", "DOM", "DOM.Iterable"],
  "module": "ESNext",
  "skipLibCheck": true,
  "moduleResolution": "bundler",
  "allowImportingTsExtensions": true,
  "resolveJsonModule": true,
  "isolatedModules": true,
  "noEmit": true,
  "jsx": "react-jsx",
  "strict": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "noFallthroughCasesInSwitch": true
}

4. 重启服务与编辑器 #

• 终止当前Vite开发服务（按Ctrl+C），重新启动：

  npm run dev
  

• 完全关闭VS Code后重新打开，清除编辑器缓存

5. 测试Node版本兼容性 #

虽然Node 20.10.0兼容Vite 5，但可尝试切换到LTS版本（如18.x）验证：

# 用nvm管理版本的话执行
nvm install 18
nvm use 18

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