WebStorm自动导入需三者对齐：ES6+模块语法、ECMAScript 6+语言版本、Settings→Editor→General→Auto Import中三个开关全开（补全插入、工具提示、实时优化），缺一不可。
WebStorm 的自动导包（import）不是开个开关就“全自动”，它依赖语言规范、项目配置和 IDE 设置三者对齐。不生效时，90% 是因为 ES 模块语法没用对、语言版本没设对，或三个关键 Auto Import 开关只开了一个。
为什么 export default function 能自动导入，module.exports = 却不行
WebStorm 的自动导入只识别 ECMAScript 模块语法（export/import），对 CommonJS（module.exports、require()）完全无感知——这不是 bug，是设计边界。
-
export default function useFetch()→ WebStorm 能识别并补全import useFetch from './hooks' -
module.exports = { useFetch }或const utils = require('./utils')→ 补全列表里压根不会出现该符号，Alt+Enter 也无效 - TypeScript 项目同理：若
tsconfig.json中"module": "commonjs"，但你混写import，可能造成解析歧义；建议统一设为"module": "ESNext"
三个 Auto Import 开关必须全开，缺一不可
仅勾选 “Add ES6 imports on code completion” 是不够的。真正实现“一敲就加 import”的，是以下三个选项协同作用：
-
Add ES6 imports on code completion：补全时插入 import（如输入useMou→ 选useMounted→ 自动加import { useMounted } from './hooks'） -
Show auto-imports tooltip：光标停在未解析名（如MyComponent）上，立刻浮出导入建议，不用等报错或手动触发 -
Optimize imports on the fly：粘贴代码或键入时，只要该符号只在一个文件中导出，立刻自动插入 import（注意：它也会实时删未用 import，调试时可临时关掉）
路径：Settings → Editor → General → Auto Import，三个复选框必须全打钩。
React / Vue 组件自动导入失败？检查文件后缀和导出结构
WebStorm 对框架组件的支持有隐形门槛：
- React：文件必须是
.tsx或.jsx；export default React.memo(MyButton)这类包裹式写法无法被识别为可导入组件；应改为export default function MyButton()或裸对象导出export default { render() { ... } } - Vue（Nuxt）：默认只扫描
~/components下首字母大写的文件（如MyCard.vue）；若用了addComponentsDir注册自定义路径（如~/modules/ui/components），WebStorm 不会运行时解析它，必须在nuxt.config.ts中静态声明：{ path: '~/modules/ui/components', prefix: 'Ui' } - 别名路径（如
@/components）跳转失败？确保tsconfig.json含"baseUrl": "./"和"paths"，改完后执行File > Reload project from Disk
浏览器 ESM 报错 Module not found？强制加 .js 后缀
Chrome/Firefox 加载 type="module" 脚本时，import 路径必须含完整扩展名，否则 404。WebStorm 默认不加，需手动开启：
- JavaScript 项目：Settings → Editor → Code Style → JavaScript → Imports → 勾选
Use file extension in imports - TypeScript 项目：同路径，切换到
TypeScript标签页，同样勾选Use file extension in imports - 注意：该设置只影响新生成的 import；已有语句需手动执行
Ctrl+Alt+O（Optimize Imports）刷新
最常被忽略的是：Nuxt 或 Vite 项目里，components/ 下的组件即使能补全，也可能因路径未带 .vue 后缀导致 HMR 失效或构建报错——这时也要开这个开关，并确认 resolve.extensions 配置与之匹配。
