如何高效配置VSCode实现自动导入模块和引入依赖？

本文共计929个文字，预计阅读时间需要4分钟。

在VSCode中，若默认不自动插入 `` 标签，可能是因为以下原因：

为什么 Ctrl+. 没反应？检查语言服务是否加载成功

VSCode 的自动导入完全依赖语言服务器（TypeScript Server、Pylance 等），不是靠插件“硬补”。状态栏右下角必须显示 TS、JavaScript 或 Python，且旁边没有感叹号或“Plain Text”字样。如果显示异常：

• 打开命令面板（Ctrl+Shift+P），运行 Developer: Toggle Developer Tools，看 Console 是否报 Cannot find global type 'Array' ——这是 tsconfig.json 缺失的典型信号
• 在项目根目录手动创建空的 tsconfig.json（内容只需 {"compilerOptions": {}}）或 jsconfig.json（加 "checkJs": true）
• 运行 TypeScript: Restart TS server（或 Python: Restart Language Server）强制重载

typescript.suggest.autoImports 和 javascript.suggest.autoImports 必须显式开启

这两个设置默认是 false，尤其新装 VSCode 或重置设置后极易遗漏。它们控制的是“输入时是否在 IntelliSense 下拉列表里显示带 import 前缀的建议项”：

• 打开 settings.json（Ctrl+, → 右上角“打开设置(JSON)”）
• 确保包含这两行（注意拼写：是 autoImports，不是 autoImport）：
  "typescript.suggest.autoImports": true
"javascript.suggest.autoImports": true
• Vue 项目额外加 "vetur.validation.script": false 并确保语言模式为 Volar（.vue 文件底部状态栏点一下切换），否则 Vetur 会拦截建议

保存时自动整理 import：source.organizeImports 是真·省事配置

即使你手写了 import，也可能漏删未使用项或顺序混乱。"source.organizeImports" 能在保存瞬间完成增删+排序，但必须配合正确触发时机：

• 在 settings.json 中加入：
  "editor.codeActionsOnSave": {"source.organizeImports": true}
• 该动作只对当前文件生效，不跨文件扫描；若想全局修复，需配合 ESLint 插件 + eslint.codeAction.onSave.fixAll
• 注意：它不会帮你从 lodash 这类库中智能选命名导入（import { debounce } from 'lodash'）还是路径导入（import debounce from 'lodash/debounce'），后者才是运行时不报错的写法

Python 和 Vue 的特殊处理不能套用 TS 配置

Python 用 Pylance，Vue 用 Volar，它们的自动导入逻辑和 TS 不兼容，强行复用设置反而失效：

• Python 必须安装 Pylance 扩展，并启用 python.analysis.autoImportCompletions（不是 autoImports）
• Vue 单文件组件中，<template> 里写的组件名（如 <MyButton>）要能被自动导入，前提是 compilerOptions.types 包含 "vue"，且 tsconfig.json 中 "moduleResolution": "node" 已设
• 自定义路径别名（如 @/components）必须在 jsconfig.json 或 tsconfig.json 的 "compilerOptions.paths" 中明确定义，否则语言服务根本“看不见”那些文件

最常被忽略的一点：自动导入只认“已安装且有类型定义”的模块。比如用了 axios 但没装 @types/axios，或者库本身不带 types 字段，VSCode 就无法推导导出项——这时候它宁可不提示，也不会瞎猜。