VSCode中启用Auto Import需安装steoates的Auto Import插件、配置tsconfig.json启用TypeScript内置导入、设置codeActionsOnSave自动组织导入、Vue项目需搭配Volar并正确声明类型、可通过Cmd+.手动触发导入。
如果您在使用 vscode 编写 typescript 或 javascript 代码时，频繁手动输入 import 语句，则可能是由于缺少自动导入支持或插件配置未生效。以下是启用并优化 auto import 功能的多种方法：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装官方推荐的 Auto Import 插件
Auto Import 功能依赖于第三方插件提供智能识别与自动补全能力，其中最稳定且广泛使用的插件由 “steoates” 开发，支持 TypeScript、JavaScript 及 Vue 等主流语言。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按快捷键 Ctrl+Shift+X）。
2、在扩展搜索框中输入 Auto Import - ES6, TS, JSX, CSS, JSON。
3、在搜索结果中找到作者为 steoates 的插件，点击“安装”按钮。
4、安装完成后，重启 VSCode 以确保插件完全加载。
二、启用 TypeScript 自带的自动导入功能
TypeScript 4.5+ 内置了自动导入建议能力，无需额外插件即可在支持的语言模式下触发 import 补全，前提是项目已正确配置 tsconfig.json 并启用相应选项。
1、确认项目根目录下存在有效的 tsconfig.json 文件。
2、在该文件中添加或确认包含以下配置项："allowSyntheticDefaultImports": true 和 "moduleResolution": "node"。
3、在编辑器中输入未声明的标识符（如某个组件名），按下 Ctrl+Space 触发建议列表。
4、在建议项中选择带 import 前缀的条目，回车确认即可自动插入 import 语句。
三、配置 VSCode 设置启用保存时自动修复导入
通过修改 VSCode 的 settings.json，可使编辑器在保存文件时自动添加缺失的 import，并移除未使用的 import，实现更彻底的自动化管理。
1、按下 Cmd+,（macOS）或 Ctrl+,（Windows/Linux）打开设置界面。
2、点击右上角的“打开设置（JSON）”图标。
3、在 settings.json 中添加以下两行配置："editor.codeActionsOnSave": {"source.organizeImports": true} 和 "typescript.preferences.autoImportSuggestionsEnabled": true。
4、保存文件后，在任意 TypeScript 文件中修改代码并保存，观察 import 是否自动增删。
四、解决 Vue 项目中无法自动导入组件的问题
Vue 单文件组件中，template 内部引用的组件若未在 script 中声明，则需插件识别 .vue 后缀并支持 SFC 特定解析逻辑，否则自动导入将失效。
1、确保已安装 Volar 插件（非 Vetur），它是 Vue 3 官方推荐的语言支持工具。
2、在 VSCode 设置中禁用 Vetur，避免与 Volar 冲突。
3、在项目根目录的 tsconfig.json 中添加 "compilerOptions.types": ["vue"]。
4、在 shims-vue.d.ts 文件中确认包含 declare module '*.vue' { ... } 模块声明。
五、手动触发自动导入的快捷方式
当光标位于未定义变量处时，可通过快捷菜单快速调出导入建议，适用于插件响应延迟或未自动弹出建议的场景。
1、将光标置于未声明的变量名上（例如 useRouter）。
2、按下 Cmd+.（macOS）或 Ctrl+.（Windows/Linux）唤出快速修复菜单。
3、在弹出的选项中选择 Import 'useRouter' from 'vue-router' 类似条目。
4、确认后，import 语句将被插入到文件顶部最近的空行位置。
