如何解决VS Code未提示React相关函数、Hook缺失导入的问题

1. 检查JSX运行时配置 #

React 17+ 支持自动JSX转换，无需手动导入React即可编写JSX，若项目配置不当会导致React相关API的全局类型被意外注入，跳过未导入校验。

• 若为TypeScript项目，打开tsconfig.json，检查compilerOptions下的jsx字段是否为react-jsx或react-jsxdev，不要使用旧版react配置；同时排查是否存在将React设为全局类型的额外配置。
• 若为JavaScript项目，打开jsconfig.json做相同校验。

2. 调整ESLint规则 #

仅安装ESLint扩展不会自动开启React相关校验，需手动安装依赖并配置规则：

1. 安装依赖：

npm install eslint-plugin-react eslint-plugin-react-hooks --save-dev

2. 编辑ESLint配置文件（.eslintrc.js/.eslintrc.json等），新增如下内容：

{
  "plugins": ["react", "react-hooks"],
  "rules": {
    "react/no-undef": "error",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

3. 排查ESLint配置的globals字段，确认没有将useState、useEffect等React API设置为全局可用。

3. 校验VS Code本地配置 #

• 打开VS Code设置，确认TypeScript > Suggest: Enabled、JavaScript > Suggest: Enabled选项为开启状态，未禁用未定义变量检测。
• 确认ESLint扩展在当前工作区已启用，右下角状态栏ESLint图标无异常报错。

4. 生效验证 #

配置完成后按Ctrl+Shift+P（Mac系统为Cmd+Shift+P），搜索并执行「重启TypeScript服务器」，之后再测试未导入useState的场景，正常会直接抛出未定义的错误提示。

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