使用lint-staged时出现Cannot use JSX unless '--jsx' flag is provided错误

这是配置问题，和React本身无关。核心原因是lint-staged执行类型检查时，没有正确读取tsconfig.json中的JSX配置，而直接运行yarn lint:checktypes时命令是正确加载了配置的。

可能的原因及解决措施： #

• lint-staged命令未指定tsconfig路径
  如果你的lint-staged配置中，类型检查命令只是tsc --noEmit，而lint:checktypes命令是tsc --noEmit --project tsconfig.json，前者会忽略tsconfig.json，导致JSX配置不生效。
  解决：修改package.json中的lint-staged配置，给tsc命令加上--project tsconfig.json参数：

  "lint-staged": {
    "*.{ts,tsx}": ["tsc --noEmit --project tsconfig.json"]
  }
  

• tsconfig.json的JSX配置错误或未被正确读取
  确保tsconfig.json中compilerOptions下存在正确的JSX配置：

  • React 17+版本用"jsx": "react-jsx"
  • 旧版本用"jsx": "react"
    如果项目存在多个tsconfig文件（如tsconfig.dev.json），要在lint-staged命令中明确指向正确的配置文件路径。

• lint-staged执行环境的路径问题
  部分场景下，lint-staged在子shell中运行时，可能无法正确解析tsconfig.json的相对路径。可以尝试用绝对路径指定配置文件，或者确保执行命令时的工作目录正确。

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