WebStorm 不支持框架级依赖注入，仅提供基于 ES 模块的自动导入功能；需同时开启三项 Auto Import 设置、配置文件扩展名、确保标准 ES 导出及正确语言版本和路径映射。
WebStorm 本身不提供“模块依赖注入”（如 Angular 的 @Injectable + constructor 自动注册）这类框架级 DI 容器的代码生成能力。它能做的，是基于你已声明的类、函数或模块，按需生成符合 ES 模块规范的 import 语句——这常被误称为“依赖注入”，实则是“自动导入依赖模块”。
为什么输入 useQuery 不自动加 import？检查三个开关是否全开
WebStorm 的自动导入不是“识别调用就加 import”，而是依赖三重条件协同触发：
-
Add ES6 imports on code completion：补全时插入（比如输useQu→ 选useQuery→ 自动加import { useQuery } from '@tanstack/react-query'） -
Show auto-imports tooltip：光标停在未解析名上（如MyComponent下划红线），立刻浮出导入建议，不用等报错 -
Optimize imports on the fly：粘贴或键入时，只要该符号只在一个文件中导出，立刻自动插入import
路径：Settings → Editor → General → Auto Import，三个复选框必须同时勾选。只开一个，90% 场景下都“没反应”。
import 路径没带 .js 扩展名，浏览器报 Module not found
现代浏览器（Chrome/Firefox）加载 ESM 时，import 路径必须含完整扩展名，否则 404。WebStorm 默认不加，得手动开启：
- JavaScript 项目：Settings → Editor → Code Style → JavaScript → Imports → 勾选
Use file extension in imports - TypeScript 项目：同路径，切换到
TypeScript标签页，也勾选Use file extension in imports
注意：该设置只影响新生成的 import；已有语句需手动右键 → Optimize Imports（或 Ctrl+Alt+O）刷新。
React/Vue 自定义 Hook 或组件不出现补全列表？导出方式和文件后缀是硬门槛
WebStorm 只识别标准 ES 模块语法，且对文件类型敏感：
- 文件必须是
.tsx或.jsx（React），或.vue（Vue 单文件组件）；.js文件里写export default function useX()可能被忽略 - 避免包裹式导出：
export default React.memo(MyComponent)不稳定；优先用具名导出：export const MyComponent = () => {} - CommonJS 写法完全无效：
module.exports = { useQuery }或const query = require('./query')，补全列表里压根不会出现该符号
导出没问题但还是不识别？检查 Settings → Languages & Frameworks → JavaScript → Language version 是否设为 ECMAScript 6+。
Live Template 里想自动推导 useEffect 依赖数组，别指望 IDE 算出来
WebStorm 的 Live Template 不做静态分析，$DEPENDENCIES$ 只是个占位符：
- 模板中写
useEffect(() => {}, [$DEPENDENCIES$])，展开后光标停在$DEPENDENCIES$处 - 此时按
Ctrl+Shift+Space（智能补全），IDE 列出当前作用域所有可访问变量名 - 选中后按
Tab或Enter插入，多个变量用逗号隔开即可
真正负责依赖推导的是 ESLint（react-hooks/exhaustive-deps）或 TypeScript 类型系统，Live Template 只管结构和占位——这个边界很多人一开始会混淆。
最常被忽略的一点：自动导入生效的前提是“符号已被正确导出且模块路径可解析”。如果你改了 tsconfig.json 的 paths 别名，但没配 WebStorm 的 webpack 配置或 TypeScript 路径映射，那再全的开关也白搭。
