如何配置VSCode代码依赖自动导入-VSCode-PHP中文网

VSCode自动导入失效主因是语言服务未启动或配置缺位：状态栏未切对语言模式、缺tsconfig.json/jsconfig.json、settings中autoImports未设为true。

如何配置vscode代码依赖自动导入

VSCode 默认不自动插入 import 语句，不是插件没装，而是语言服务根本没启动或配置缺位——90% 的“不提示导入”问题都卡在这三步：状态栏没显示 TS/JS/Python、项目根目录缺 tsconfig.json/jsconfig.json、设置里 autoImports 没开成布尔值 true。

右下角状态栏显示 Plain Text？先救语言模式

这是最常被忽略的起点。VSCode 的自动导入完全依赖语言服务器（TypeScript Server、Pylance、Intelephense），它连“当前是 JS 还是 HTML”都识别不了，后面全白搭。

点击右下角状态栏文字（如 Plain Text、HTML、Vue (Deprecated)），手动切换为 TypeScript、JavaScript 或 Python
Vue 单文件必须切到 vue 模式（不是 Vue (Deprecated)），且需已安装 Volar（非 Vue Official）
打开命令面板（Ctrl+Shift+P），运行 Developer: Toggle Developer Tools，在 Console 里输入 require('typescript') —— 若报 Cannot find module 'typescript'，说明 TS 服务未加载，大概率是缺配置文件

tsconfig.json 或 jsconfig.json 是硬门槛

没有这个文件，语言服务不会对项目做符号索引，也就无法知道 useState 在哪、formatDate 来自哪个 utils 文件。它不需要写满配置，但必须存在且位置正确。

在项目根目录新建 tsconfig.json（TS 项目）或 jsconfig.json（JS 项目）
最简内容即可：
```
{"compilerOptions": {}}
```
（JS 项目可加 "checkJs": true）
路径别名（如 @/hooks）必须在 tsconfig.json 的 compilerOptions.baseUrl 和 paths 中声明，VSCode 不读 Webpack/Vite 的 resolve.alias
改完配置后，务必运行命令 TypeScript: Restart TS server 或 Python: Restart Language Server

settings.json 里 autoImports 必须是布尔值 true

这两个设置控制的是“补全下拉列表里是否出现带 import 前缀的选项”，不是“保存时自动整理”，也不是“代码片段插入”。拼错名、写成字符串、漏掉其中一个，都会失效。

VSCode

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

下载

打开 settings.json（Ctrl+, → 右上角“打开设置(JSON)”）
确保有且仅有这两行（注意：无引号包裹 true，拼写是 autoImports，不是 autoImport）：
```
"javascript.suggest.autoImports": true,"typescript.suggest.autoImports": true
```
Python 用户要配 "python.analysis.autoImportCompletions": true，并确认已启用 Pylance（"python.languageServer": "Pylance"）
禁用会劫持补全的插件：旧版 Auto Import (wix)、ES7+ React/Redux snippets——它们会让 Ctrl+Space 只出代码片段，压根不触发 import 建议

Ctrl+. 没反应？检查触发时机和作用域

Ctrl+.（或 Cmd+.）是手动触发 import 补全的快捷键，但它只在光标落在未定义标识符上时才有效，且依赖上下文完整。

光标必须停在未导入的符号上（如刚输完 useRouter，光标在末尾，不能在中间或空格后）
该符号必须能被语言服务索引到：如果是跨包引用（如 lodash/debounce），确保包已安装且类型声明可用（@types/lodash）
Vue SFC 的区域写不触发？那是组件注册问题，不是 import 问题；自动导入只响应 JS/TS 脚本区内的变量/函数调用
想保存时自动整理（增删 + 排序），要单独配：
```
"editor.codeActionsOnSave": {"source.organizeImports": true}
```
，这和补全时插入 import 是两套逻辑

真正容易被忽略的点是：自动导入能力不是“全局开关”，它严格绑定于当前文件的语言模式、项目配置、语言服务器状态。哪怕只在一个子文件夹里开发，也得保证该文件夹是项目根，或在父级放好 tsconfig.json 并重启服务——否则你改了十次设置，它依然安静如鸡。