webstorm 识别不了 import 是因默认按 commonjs 推导模块上下文，需在 package.json 中添加 "type": "module" 或改用 .mjs 后缀；同时确保语言版本为 es6+、启用 auto import 全选项、手动附加外部库并勾选 download sources，以及在 imports 设置中启用 use file extension in imports。
WebStorm 识别不了 import 或标红 Unresolved variable
根本不是 WebStorm 不支持 ESModule，而是它默认按 CommonJS（require）推导模块上下文。你在 .js 文件里写 import，但项目没明确声明模块类型，IDE 就不解析这些语句——跳转失效、补全不触发、变量报红全是连锁反应。
- 检查根目录
package.json是否含"type": "module"：这是 Node.js 和 WebStorm 共同认的开关，有它就自动切 ESM 模式 - 没有
"type": "module"？那.js文件默认仍被当 CommonJS 处理；临时解法是右键单个文件 →Override File Type→ 选JavaScript (ES6)，但只对当前文件生效 - 用
.mjs后缀可强制 WebStorm 按 ESM 解析，但得确保构建工具（如 Vite/Webpack）也支持该后缀，否则运行时报错
第三方库没代码提示、Alt+Enter 不弹导入建议
自动导入不是开个开关就行，它依赖三重条件同时满足：语言版本正确、模块语法合规、Auto Import 开关全启用。
- 进
Settings → Languages & Frameworks → JavaScript，Language version必须设为ECMAScript 6+（不能是 ES5） - 进
Settings → Editor → General → Auto Import，三个选项都要勾上：Add ES6 imports on code completion、Show auto-imports tooltip、Optimize imports on the fly - 导出必须用
export（不是module.exports），且不能被declare module或未声明全局污染遮蔽 - React 组件推荐用具名导出（
export const Button =），比export default React.memo()更稳定
手动添加外部 JS 库（如青瓷引擎、无 npm 包的 SDK）
这类库没发布到 npm，WebStorm 不会自动索引，必须手动告诉它“这个目录里的代码我需要补全和跳转”。
- 路径：
Settings → Languages & Frameworks → JavaScript → Libraries→ 点右上角Add - 填一个易识别的
Name（比如qici-engine），Visibility推荐选Global（方便多项目复用） - 点
+→Attach Directory，选中你存放库文件的整个目录（如qc-core-debug.js所在文件夹） - 务必勾选
Download sources，否则 import 时找不到export声明，类型提示全无 - 添加后重启 WebStorm 或右键项目 →
Reload project，否则可能不生效
import 路径没带 .js 后缀，上线后 404
浏览器 ESM 加载强制要求静态 import 路径带扩展名，但 WebStorm 默认生成不带后缀的路径（如 import { foo } from '@/utils'），本地开发正常，部署到静态服务器就 404。
- 进
Settings → Editor → Code Style → JavaScript → Imports，勾选Use file extension in imports - 注意：该设置仅对新生成的
import生效；已有语句需全选文件 → 按Ctrl+Alt+O（Optimize Imports）刷新 - 如果用了
jsconfig.json或tsconfig.json，确保含"moduleResolution": "node"和"module": "ESNext"，否则路径别名（如@/utils）和子路径导出（"exports"字段）无法被正确映射
package.json 的 "type": "module"、node_modules 目录索引，还是手动附加的库路径。最容易被忽略的是：即使库已下载，若没在 Libraries 设置里勾选“引入”，或没点 Download sources，代码提示就始终是残缺的。
