React+TypeScript项目中VSCode Lint与编译配置不一致的Emotion报错问题

以下是针对Nx+React+TypeScript项目中，VSCode lint提示Emotion css 属性不存在问题的几种解决办法：

• 检查Nx项目的tsconfig层级配置
  Nx项目存在根目录的tsconfig.base.json和各子项目的tsconfig.json，确保你修改的是当前子项目的tsconfig文件，或者在根tsconfig.base.json的compilerOptions.types中添加@emotion/react/types/css-prop，并让子项目的tsconfig通过extends继承根配置：

  // tsconfig.base.json
  {
    "compilerOptions": {
      "types": ["@emotion/react/types/css-prop"]
    }
  }
  

  // 子项目tsconfig.json
  {
    "extends": "../../tsconfig.base.json"
  }
  

• 配置JSX导入源
  在tsconfig的compilerOptions中添加jsxImportSource，配合React 17+的自动JSX转换，确保TypeScript能识别Emotion的css prop：

  {
    "compilerOptions": {
      "jsx": "react-jsx",
      "jsxImportSource": "@emotion/react"
    }
  }
  

• 切换VSCode使用项目本地TypeScript版本
  VSCode默认可能使用内置的TypeScript版本，和项目依赖的版本不一致会导致类型识别异常：

  1. 点击VSCode右下角状态栏的TypeScript版本号
  2. 在弹出的选项中选择「Use Workspace Version」

• 重置VSCode的TypeScript服务
  打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），依次执行：

  • TypeScript: Restart TS Server
  • TypeScript: Reload Projects

• 检查是否遗漏Emotion依赖
  确保已安装@emotion/react和对应依赖，并且版本匹配你的React版本：

  npm install @emotion/react
  

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