VSC的IntelliSense不显示react、react-native组件对象与函数提示如何解决

算力阿峰

2026-10-4

问题说明

VS Code的IntelliSense无法为react和react-native组件提供对应建议，输入代码时，所有相关建议都仅以文本形式展示，而非对象或函数类型。自行编写的内置导入内容和自有库的提示功能运行正常。
相关截图如下：
异常截图1
异常截图2
预期效果截图

解决方案

第一步：安装对应类型声明包
在项目根目录执行对应包管理器的命令安装react和react-native的类型声明文件：
npm用户执行：npm install @types/react @types/react-native --save-dev
yarn用户执行：yarn add @types/react @types/react-native -D
pnpm用户执行：pnpm add @types/react @types/react-native -D
第二步：对齐TypeScript版本
打开项目内任意.tsx/.jsx后缀的文件，点击VS Code底部状态栏右侧显示的TypeScript版本号，在弹出的选项中选择「使用工作区版本」，避免全局TS版本和项目依赖版本不兼容导致类型识别异常。
第三步：校验项目配置文件
确认项目根目录下存在jsconfig.json（JavaScript项目）或tsconfig.json（TypeScript项目），且包含如下核心配置：
```
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"]
}
```
第四步：检查编辑器扩展配置
1. 确认已安装并启用微软官方的「JavaScript and TypeScript Nightly」扩展，临时禁用其他第三方代码提示类扩展排查冲突。
2. 打开VS Code设置页，搜索typescript.suggest.enabled和javascript.suggest.enabled，确认两项配置均为开启状态。
第五步：重启相关服务
按下快捷键Ctrl+Shift+P（Mac系统为Cmd+Shift+P）调出命令面板，输入「TypeScript: Restart TS Server」执行，等待服务重启完成后查看代码提示是否恢复正常。如果仍有问题，可直接重启VS Code，或是删除项目下的node_modules文件夹、依赖锁定文件后重新执行依赖安装命令。