如何调整VSCode设置，让导入时可以提示更多文件及相关API

云原生阿岚

2026-9-30

基础配置校验

首先确认VSCode内置的「TypeScript and JavaScript Language Features」插件处于启用状态，这是JS/TS项目自动导入功能的核心依赖，禁用后会完全失去相关提示能力。
检查项目根目录是否存在jsconfig.json（JS项目）或tsconfig.json（TS项目），该文件用于指定VSCode检索导入资源的范围，无配置时VSCode默认只会检索当前打开文件的同级目录内容，很容易出现导入提示缺失的问题。可参考以下模板创建配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "preserve"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "build"]
}

其中include字段即为检索导入资源的目录范围，可根据项目实际结构调整匹配规则；exclude字段用于过滤不需要检索的目录，减少无效提示同时降低性能消耗。

自动导入功能配置优化

打开VSCode设置面板（快捷键Ctrl+,/Cmd+,），搜索并确认以下配置项开启：

javascript.suggest.autoImports：设置为true，开启JS文件的自动导入提示
typescript.suggest.autoImports：设置为true，开启TS文件的自动导入提示
javascript.preferences.importModuleSpecifier：可根据需求设置为relative（生成相对路径导入）或non-relative（优先使用baseUrl/paths配置的别名路径导入）
typescript.preferences.includePackageJsonAutoImports：设置为true，开启第三方依赖包的导出内容检索能力，useState、useContext等框架API无提示的问题大部分可通过开启该配置解决，TS项目还需要额外安装对应框架的类型定义包（如React项目安装@types/react）才能正确识别包内导出的API。

异常场景修复

部分文件无导入提示：检查对应文件的路径是否被exclude字段过滤，或是没有被include的匹配规则覆盖，调整配置后执行命令Ctrl+Shift+P/Cmd+Shift+P唤出命令面板，运行「TypeScript: Restart TS Server」重启语言服务即可生效。
第三方包API无导入提示：确认对应依赖已经安装到项目的node_modules目录下，TS项目补充安装@types/xxx类型定义包后重启TS服务即可。
自动导入路径不符合预期：调整jsconfig.json/tsconfig.json中的baseUrl和paths别名规则，重启TS服务后生效。

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