VSCode怎么使用插件增强自动导入体验-VSCode-PHP中文网

应安装 steoates.auto-import 插件：打开扩展市场搜索“Auto Import - TypeScript”，认准作者 steoates，卸载所有含 ES7、React Snippets 或 wix 的冲突插件，安装后必须重启 VSCode，并确保项目根目录存在配置了 "moduleResolution": "node" 的 tsconfig.json 或 jsconfig.json。

vscode怎么使用插件增强自动导入体验

Auto Import 插件装哪个、怎么装才不冲突

别装错版本——VSCode 市场里叫 “Auto Import” 的插件有好几个，真正稳定且持续维护的是 steoates.auto-import（作者名 + 插件 ID 要对得上）。旧版 Auto Import (wix) 或某些带“ES7”“React Snippets”的补全类插件会劫持 Ctrl+Space 行为，导致输入 useState 后只弹出代码片段、压根不显示 import 建议。

安装后必须重启 VSCode，否则插件的静态分析逻辑不会加载。重启后打开一个 .ts 文件，右下角确认语言模式是 TypeScript（不是 Plain Text 或 JavaScript (Deprecated)），再试一次 useEffect —— 这时 Ctrl+. 才可能弹出 import 选项。

在扩展市场搜 Auto Import - TypeScript，认准作者 steoates
卸载所有名字含 ES7+、React Snippets、Auto Import (wix) 的插件
装完立刻重启，别等“好像也行了”再拖

tsconfig.json 和 jsconfig.json 是自动导入的硬门槛

VSCode 的自动导入不是靠插件“猜”，而是靠 TypeScript 语言服务做模块路径解析。没有 tsconfig.json（TS 项目）或 jsconfig.json（JS 项目），连 node_modules 里的包都索引不到，import React 都不会提示。

哪怕你用的是纯 JS 项目，也得在根目录放一个最简 jsconfig.json：

{
  "compilerOptions": {
    "checkJs": true,
    "moduleResolution": "node"
  }
}

TS 项目同理，tsconfig.json 至少要有 "moduleResolution": "node"。如果用了路径别名（比如 @/utils），还得在 compilerOptions 里配 baseUrl 和 paths，否则插件生成的 import 会是相对路径，而非你期望的别名。

文件必须存在，内容可以极简，但不能缺
moduleResolution 必须是 "node" 或 "nodenext"，"classic" 不支持自动导入
改完配置要运行命令 TypeScript: Restart TS server，不是只重启编辑器

Ctrl+. 是唯一靠谱的触发方式，别等回车

很多人输完 computed 就按回车，结果只留下一个未定义变量——因为原生补全列表默认不展示 import 建议，除非你把光标停在它上面手动唤出 Quick Fix。

VSCode

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

下载

真正稳定的做法是：光标停在未定义符号上（比如刚打完 ref 但没 import），直接按 Ctrl+.（Windows/Linux）或 Cmd+.（macOS）。这时弹出的菜单第一项通常是 Import 'ref' from 'vue'，选中回车即可。

typescript.suggest.autoImports 和 javascript.suggest.autoImports 必须设为布尔值 true，不是字符串 "true"
Vue 单文件中 template 里写没提示？先点右下角把语言模式切到 vue，再确保已装 Volar（不是 Vue Official）
如果 Ctrl+. 没反应，先开 Developer Tools 看 Console 是否报 Cannot find module 'typescript'，大概率是 TS Server 没起来

保存时自动整理 import：source.organizeImports

插件帮你加 import，但删冗余、排顺序、合并同类项，得靠 VSCode 原生的 source.organizeImports。它和自动补全是两件事：前者在保存瞬间执行，后者在编码中触发。

加进 settings.json 就能生效：

"editor.codeActionsOnSave": {
  "source.organizeImports": true
}

注意它只作用于当前文件，不会跨文件扫描。如果你写了 import { debounce } from 'lodash' 但没用，保存时就会被删掉；如果同时用了 map 和 filter，它会自动合并成 import { debounce, map, filter } from 'lodash'。