正确配置VSCode自动导入需启用suggest.autoImports和tabCompletion，配合ESLint自动修复与tsconfig路径映射，确保类型定义完整，可实现TypeScript/JavaScript中import语句的智能补全与保存时自动添加，提升开发效率。
VSCode 的自动导入功能可以大幅提升编码效率，尤其是在使用 TypeScript 或 JavaScript（配合 ESLint、TypeScript 语言服务）时。正确配置后，VSCode 能在你输入未导入的类、函数或组件时，自动添加对应的 import 语句。
1. 启用自动导入基本设置
确保以下 VSCode 设置已开启，这是实现自动导入的前提：
- "typescript.suggest.autoImports": true — 启用 TypeScript 的自动导入建议
- "javascript.suggest.autoImports": true — 同样适用于 JavaScript 文件
- "editor.quickSuggestions": { "other": true, "comments": false, "strings": true } — 确保代码提示正常工作
- "editor.tabCompletion": "on" — 开启 Tab 键补全，输入模块名后可直接导入
这些设置可在 settings.json 中统一配置：
{
"typescript.suggest.autoImports": true,
"javascript.suggest.autoImports": true,
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
"editor.tabCompletion": "on"
}
2. 配合 ESLint 实现更智能的导入（推荐）
如果你使用 ESLint 和 Prettier，可以通过 eslint-plugin-import 提升导入体验。
安装依赖：
npm install eslint-plugin-import --save-dev
在 .eslintrc.js 或 .eslintrc.json 中启用自动修复和导入解析：
Difeye是一款超轻量级PHP框架，主要特点有： Difeye是一款超轻量级PHP框架，主要特点有： ◆数据库连接做自动主从读写分离配置，适合单机和分布式站点部署； ◆支持Smarty模板机制，可灵活配置第三方缓存组件； ◆完全分离页面和动作，仿C#页面加载自动执行Page_Load入口函数； ◆支持mysql，mongodb等第三方数据库模块，支持读写分离，分布式部署； ◆增加后台管理开发示例
{
"plugins": ["import"],
"rules": {
"import/no-unresolved": "error",
"import/named": "error"
}
}
VSCode 安装插件：ESLint，并开启保存时自动修复：
"eslint.enable": true,
"eslint.run": "onSave",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
这样在拼错或漏导入时，保存文件会自动添加缺失的 import。
3. 使用 Path Mapping 提升路径导入体验
若项目中使用了别名路径（如 @/components），需在 tsconfig.json 或 jsconfig.json 中配置路径映射：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
配置后，VSCode 可识别 @/utils/api 这类路径，并支持自动导入和跳转定义。
4. 常见问题与解决
- 不提示自动导入？ 检查是否在 jsconfig/tsconfig 覆盖范围内，确认文件属于项目结构
- 导入路径是相对路径还是别名？ 默认可能用相对路径，可通过 ESLint 规则或插件（如 Path Intellisense）优化
- 第三方库无法自动导入？ 确认已安装类型定义（@types/xxx）且库导出方式被正确识别
基本上就这些。合理配置后，VSCode 的自动导入非常可靠，能显著减少手动引入模块的时间。关键是打开建议、配好 ESLint 和路径映射。不复杂但容易忽略细节。
