React Native项目：如何让VS Code提示已安装的npm包元素？

下面是几个针对性的解决办法，按顺序尝试即可：

1. 安装对应类型声明包 #

第三方React Native库的智能提示依赖TypeScript类型声明文件，执行以下命令安装：

npm install @types/react-native-elements @types/react-native-vector-icons --save-dev

如果使用Yarn则替换为：

yarn add @types/react-native-elements @types/react-native-vector-icons -D

2. 配置项目的jsconfig/tsconfig文件 #

在项目根目录创建或修改jsconfig.json（JavaScript项目）或tsconfig.json（TypeScript项目），让VS Code正确识别库的类型定义：

JavaScript项目（jsconfig.json） #

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*", "src/*"]
    },
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

TypeScript项目（tsconfig.json） #

在compilerOptions中添加类型配置：

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "types": ["react-native", "react-native-elements", "react-native-vector-icons"]
  }
}

修改完成后，按Ctrl+Shift+P打开命令面板，输入TypeScript: Restart TS Server重启TypeScript服务。

3. 确保导入方式正确 #

必须从安装的第三方库导入组件，而非react-native：
❌ 错误示例：

import { Button } from 'react-native'

✅ 正确示例：

import { Button } from 'react-native-elements'
import { Ionicons } from 'react-native-vector-icons'

4. 清除VS Code缓存并重载窗口 #

按Ctrl+Shift+P输入Developer: Reload Window重载窗口；也可以手动删除VS Code缓存目录：

• Windows：%APPDATA%\Code\Cache
• Mac：~/Library/Caches/Code
• Linux：~/.config/Code/Cache

5. 检查插件设置 #

确保VS Code的TypeScript、ESLint插件为最新版本，且开启了智能提示：

1. 打开设置（快捷键Ctrl+,），搜索editor.suggest.enabled确认已勾选
2. 搜索typescript.suggest.enabled确认已勾选

内容的提问来源于stack exchange，提问作者André Cerutti Franciscatto