VSCode依赖自动导入配置方法-VSCode-PHP中文网

vscode自动导入依赖语言服务正确加载，核心条件为：右下角显示ts/js/python/vue（volar）、存在tsconfig.json/jsconfig.json、settings中typescript.suggest.autoimports和javascript.suggest.autoimports设为true、禁用冲突插件、路径别名须在tsconfig.json中配置baseurl/paths并重启ts server。

vscode依赖自动导入配置方法

VSCode 依赖自动导入不是靠插件“一装就灵”，而是语言服务（TypeScript Server、Pylance、Volar）在正确配置下触发的语义行为。绝大多数失败案例，问题出在语言服务没加载、配置文件缺失或设置开关关闭这三处。

为什么 `Ctrl+.` 没反应或补全不带 import？

这不是功能坏了，是语言服务根本没启动——补全逻辑压根没跑起来。

看右下角状态栏：必须显示 TypeScript、JavaScript、Python 或 Vue (Volar)，且旁边有齿轮图标；若显示 Plain Text、HTML 或 JavaScript (Deprecated)，说明语言模式识别失败
项目根目录必须存在 tsconfig.json（TS 项目）或 jsconfig.json（JS 项目），哪怕内容只是 {"compilerOptions": {}}
打开命令面板（Ctrl+Shift+P），运行 Developer: Toggle Developer Tools，在 Console 中输入 require('typescript') —— 若报 Cannot find module 'typescript'，说明 TS 服务未加载
运行 TypeScript: Restart TS server 或 Python: Restart Language Server 强制重载

`typescript.suggest.autoImports` 和 `javascript.suggest.autoImports` 必须显式设为 `true`

这两个设置控制「输入时是否在 IntelliSense 下拉里显示带 import 前缀的建议项」，默认值是 false，新装 VSCode 或重置设置后极易遗漏。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

不要在设置 UI 里只搜 “auto import”——要精确搜 autoImports（注意是复数，不是 autoImport）
在 settings.json 中直接写入（值是布尔类型，不能加引号）：
"typescript.suggest.autoImports": true
"javascript.suggest.autoImports": true
Vue 单文件需额外确认语言模式是 vue（点右下角切换），并禁用 Vetur（它会拦截建议）
Python 用户对应的是 python.analysis.autoImportCompletions，且必须启用 Pylance 作为语言服务器

路径别名（如 `@/hooks`）不生效？VSCode 只认 `tsconfig.json` 的 `baseUrl` 和 `paths`

Webpack/Vite 的 resolve.alias 对 VSCode 完全无效。它只解析 tsconfig.json 里的声明。

在 tsconfig.json 的 compilerOptions 中添加：
"baseUrl": "./",
"paths": { "@/*": ["src/*"], "@components/*": ["src/components/*"] }
改完必须重启 TS Server（命令面板搜 Restart TS server）
确保当前文件在 include 范围内，比如 "include": ["src/**/*"] 漏掉 tests/，那里的路径别名就不会被识别
多根工作区下，只有「活动文件夹」的配置生效；其他子项目需单独配 tsconfig.json 或用 "extends" 继承

保存时自动整理 import：用 `source.organizeImports` 真·省事

手写 import 容易漏删未使用项、顺序混乱。source.organizeImports 在保存瞬间完成增删 + 分组排序，但仅限当前文件。

在 settings.json 中加入：
"editor.codeActionsOnSave": {"source.organizeImports": true}
它不会跨文件扫描，也不会帮你从 lodash 这类库中智能拆解方法（比如把 import _ from 'lodash' 拆成 import { debounce } from 'lodash'）
若需全局修复或更细粒度控制（如按组排序、校验顺序），得配合 ESLint 的 import/order 规则 + eslint.codeAction.onSave.fixAll
注意：该设置和 autoImports 是两件事——前者管保存时整理，后者管输入时插入