VSCode import 不自动补全的根本原因是 TypeScript/JavaScript 语义化支持未启用：TypeScript 项目需 tsconfig.json（哪怕空配置），JavaScript 项目需 jsconfig.json 并设 "checkJs": true；还需开启 "javascript.suggest.autoImports" 和 "typescript.suggest.autoImports" 设置，确保语言模式正确（如 .vue 用 Volar、.tsx 用 typescriptreact），并重启 TS Server。

为什么 import 不自动补全？先看 TypeScript/JavaScript 是否启用语义化支持

VSCode 默认不自动插入 import 语句，不是插件没装，而是语言服务没激活或配置不对。TypeScript 项目必须有 tsconfig.json（哪怕空文件），否则 import 补全、路径智能提示全部失效；纯 JavaScript 项目则需开启 jsconfig.json 并设置 "checkJs": true 或至少 "allowSyntheticDefaultImports": true。

常见错误现象：Ctrl+Space 没反应、输入函数名后按 Tab 不弹出 import 提示、路径补全只显示文件名不带扩展名。

• 确认项目根目录存在 tsconfig.json 或 jsconfig.json
• TypeScript 项目中，tsconfig.json 至少包含 {"compilerOptions": {}}，空对象即可启动基础服务
• JavaScript 项目若用 ES Module，jsconfig.json 中建议加 "moduleResolution": "node"，否则相对路径可能解析失败
• 打开命令面板（Ctrl+Shift+P），运行 Developer: Toggle Developer Tools，查看 Console 是否报错 Cannot find global type 'Array' 类提示——这是配置缺失的典型信号

怎么让 VSCode 在补全时自动插入 import 语句？

核心是开启 javascript.suggest.autoImports 和 typescript.suggest.autoImports 这两个设置，它们控制「符号补全时是否自动加 import」。注意：这和「保存时自动整理 import」（editor.codeActionsOnSave）是两回事，别混淆。

使用场景：你在写 useEffect，敲完 useE 后按 Enter 或 Tab，VSCode 应该自动补全函数并插入 import { useEffect } from 'react';。

VSCode

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

下载

• 在设置 UI 中搜索 autoImports，把 JavaScript > Suggest: Auto Imports 和 TypeScript > Suggest: Auto Imports 都勾上
• 或者直接编辑 settings.json，加入：

  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true

• 如果用了路径别名（如 @/components），确保 tsconfig.json 的 "baseUrl" 和 "paths" 已正确定义，否则自动 import 会生成绝对路径或报错
• 某些库（如 lodash）默认不导出命名导入，import { debounce } from 'lodash' 可能失败——此时 VSCode 仍会尝试插入，但运行时报错，得手动改成 import debounce from 'lodash/debounce'

import 路径补全为什么总是相对路径？怎么改成基于 baseUrl 的别名路径？

VSCode 默认按文件系统层级生成相对路径（如 ../../utils/helper），即使你已配好 tsconfig.json 的 paths。要让它优先用别名，得显式启用路径映射支持。

性能影响：启用后，VSCode 会多读一次 tsconfig.json 做路径解析，对大型项目无感；但若 paths 配错（比如通配符没闭合），可能导致整个 import 补全功能卡顿或失效。

• 确保 tsconfig.json 中 "baseUrl" 设为 "." 或 "src"，且 "paths" 格式正确，例如：

  "paths": {
    "@/*": ["src/*"],
    "@components/*": ["src/components/*"]
  }

• 在 settings.json 中添加：

  "typescript.preferences.importModuleSpecifier": "non-relative",
  "javascript.preferences.importModuleSpecifier": "non-relative"

• 重启 TS Server：命令面板运行 TypeScript: Restart TS server，否则新配置不生效
• 注意："non-relative" 不等于“一定用别名”，它只是优先尝试非相对路径；如果别名无法匹配，仍会回退到相对路径

React/Vue 项目里自动 import 失效？检查你的语言模式和插件冲突

VSCode 会根据当前文件后缀（.tsx、.vue）切换语言服务。但 .vue 文件默认走 Vue Language Features（Volar），而 Volar 对 import 补全的支持依赖 volar.config.json 或项目级配置，不是靠全局 autoImports 设置。

常见错误现象：.tsx 文件正常，.vue 文件里写 ref 不提示 import；或装了 Vetur 后所有自动 import 都消失。

• Vue 3 项目务必禁用 Vetur，只启用 Volar；Volar 需要开启 "types": ["volar"] 或在 volar.config.json 中设 "enableAutoImport": true
• React + TypeScript 项目，确认文件语言模式是 typescriptreact（右下角点击语言模式可切换），不是 typescript 或 javascriptreact，否则 autoImports 不触发
• 某些插件（如 Import Sorter、Auto Import）会劫持补全逻辑，导致原生功能失效——临时禁用它们，验证是否冲突
• 如果用 pnpm/yarn workspaces，确保 tsconfig.json 在 workspace 根目录，子包未覆盖父级配置

自动 import 看似简单，真正卡住人的地方往往不在开关本身，而在语言服务是否真正加载、路径映射是否被识别、以及当前文件的语言模式是否匹配预期。改完配置记得重启 TS Server，不然所有操作都白搭。