Parcel+TypeScript+React项目VS Code报错，tsconfig配置是否正确？

你的最终tsconfig.json是适配Parcel与VS Code的正确核心配置，以下是对每个配置项的作用说明，以及推荐补充的配置项：

核心配置项解析 #

• "jsx": "react-jsx"：启用React 17+的现代JSX转换，无需在每个TSX文件手动导入React，完美匹配Parcel的自动JSX支持逻辑，解决VS Code中'React' refers to a UMD global的报错。
• "module": "ES2022"：指定模块系统为ES2022，支持import.meta.url这类现代ES模块特性，解决Web Worker代码中的语法报错。
• "moduleResolution": "Bundler"：让TypeScript使用打包器（即Parcel）的模块解析规则，确保TS的静态检查逻辑与Parcel的实际打包行为一致，避免解析差异导致的报错。

推荐补充的配置项 #

为了让TS与Parcel的协作更顺畅，同时提升代码质量，建议添加以下配置：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "module": "ES2022",
    "moduleResolution": "Bundler",
    // 推荐补充项
    "target": "ES2020",
    "strict": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

补充配置说明 #

• "strict": true：开启所有严格类型检查选项，是TypeScript项目的最佳实践，能提前发现潜在类型问题。
• "isolatedModules": true：适配Parcel的单文件编译模式，确保TS的检查逻辑与Parcel一致，避免出现TS编译通过但Parcel打包失败的情况。
• "include"/"exclude"：明确TS的处理范围，减少不必要的类型检查，同时避免VS Code误检非源码文件。

内容的提问来源于stack exchange，提问作者Eugene Khyst