VSCode自动导入需语言服务正常加载、tsconfig.json/jsconfig.json存在且配置正确、settings.json中javascript.suggest.autoImports和typescript.suggest.autoImports设为true(布尔值),三者缺一不可。

VSCode 的自动导入不是装个插件就生效的功能,它本质上是语言服务(TypeScript Server、Pylance、Volar)在正确配置下触发的语义行为。如果 useState 输完回车没加 import,Ctrl+. 没反应,大概率是语言服务压根没加载,而不是插件没装对。
右下角语言模式和 tsconfig.json/jsconfig.json 是硬门槛
状态栏右下角必须显示 TypeScript、JavaScript 或 Python,且不能带感叹号或 “Plain Text” 字样;否则所有自动导入逻辑都不会启动。
- 项目根目录必须存在
tsconfig.json(TS 项目)或jsconfig.json(JS 项目),哪怕内容只是{"compilerOptions": {}}—— 缺这个文件,路径解析、模块索引全失效 - Vue 单文件中写
不提示导入?确认语言模式是vue(点击右下角切换),不是html或javascript - 打开命令面板(
Ctrl+Shift+P),运行Developer: Toggle Developer Tools,看 Console 是否报Cannot find global type 'Promise'或Failed to load typescript;有则说明 TS 服务崩溃,需重装typescript包或重启 TS Server
settings.json 里这两个布尔值必须为 true
javascript.suggest.autoImports 和 typescript.suggest.autoImports 控制的是「补全时是否在 IntelliSense 下拉列表里显示带 import 前缀的建议项」,默认是 false,新装 VSCode 或重置设置后极易遗漏。
- 必须是布尔值
true,不是字符串"true";拼写是autoImports(复数),大小写敏感 - 直接编辑
settings.json,加入这两行即可:"javascript.suggest.autoImports": true"typescript.suggest.autoImports": true - 别和
editor.codeActionsOnSave混淆:后者控制保存时自动整理 import(如删未用项),前者才是补全时插入 import 的开关
路径别名(如 @/hooks)不识别?只认 tsconfig.json 的 baseUrl/paths
VSCode 完全不读 Webpack/Vite 的 resolve.alias,它只认 tsconfig.json 里的 baseUrl 和 paths 配置。
- 例如要支持
@/components/Button,必须在tsconfig.json中显式写:"baseUrl": "./""paths": { "@/*": ["src/*"] } - 改完后必须手动重启 TS Server:命令面板输入
TypeScript: Restart TS server - 确保当前文件在
include范围内,比如"include": ["src/**/*"]漏掉tests/目录,对应路径就无法解析 - 多根工作区下,只有「活动文件夹」下的
tsconfig.json生效;其他子项目需单独配,或用"extends"继承公共配置
别让旧插件劫持 Ctrl+. 补全逻辑
很多插件会覆盖原生语言服务的补全行为,导致 Ctrl+. 弹出一堆代码片段,却不出 import 建议。
- 禁用这些常见冲突插件:
Auto Import (wix)、ES7+ React/Redux/React-Native snippets、Import Cost - Vue 项目务必用
Volar,不是 Vue Official 插件;后者会拦截建议,且不支持setup语法下的自动导入 - 触发最稳的方式是:把光标停在未定义符号上(比如刚打完
useEffect),按Ctrl+.(Windows/Linux)或Cmd+.(macOS)—— 这个快捷键调用的是 Quick Fix,不依赖补全列表是否弹出
最容易被忽略的是:语言服务是否真正加载成功。状态栏图标、tsconfig.json 存在性、两个 autoImports 设置的布尔类型,这三者缺一不可。一旦其中任一条件不满足,整个自动导入链路就断了,再装十个插件也没用。











