模块化开发前必须确认的三个基础配置：一是tsconfig.json中显式设置"moduleresolution": "bundler"；二是baseurl和paths需与webstorm的javascript libraries设置同步；三是vue sfc中依赖volar插件启用。
模块化开发前必须确认的三个基础配置
WebStorm 本身不强制模块化，但如果你用 ES Module、Vite 或 Webpack，它必须正确识别模块边界和导入路径，否则 import 提示全灰、跳转失效、类型推断崩塌。核心不是写法问题，而是 IDE 是否“信得过”你的模块系统。
-
tsconfig.json中"moduleResolution": "bundler"必须显式设置（尤其 Vue/TS 项目），否则 WebStorm 会退回到旧式node模式，导致import { Button } from 'tdesign-vue-next'被标红但实际能跑 -
baseUrl和paths配置必须与 WebStorm 的Settings | Languages & Frameworks | JavaScript | Libraries | Add...同步——比如你写了"@src/*": ["src/*"]，就得在 Libraries 里把src目录标记为 “Source root”，否则 Ctrl+Click 进不去 - Vue SFC（
.vue）文件中<script setup lang="ts"></script>的类型推断依赖vue-tsc或volar插件；WebStorm 2025.1+ 默认启用 Volar，但若你手动关过或装了冲突插件（如旧版 Vue.js），defineProps的泛型参数就无法被识别
import 路径提示失效？先查 node_modules 解析逻辑
常见现象：输入 import { useStore } 后没自动补全，或补全项里没有 pinia，但 npm run dev 正常启动。这不是网络或缓存问题，而是 WebStorm 没把 node_modules 当作有效模块源。
- 打开
Settings | Languages & Frameworks | JavaScript | Libraries，确认node_modules文件夹已勾选 “Download sources and documentation” —— 不勾这个，IDE 就只当它是普通文件夹，不会解析其中的types或exports - 如果用了 pnpm，WebStorm 默认不识别
pnpm store结构，需手动在Settings | Languages & Frameworks | Node.js and NPM中点击 “Reload project from package.json”，强制刷新依赖图谱 - 遇到
Cannot resolve symbol 'xxx'但路径没错？右键node_modules→ “Reload from disk”，再按Ctrl+Shift+O（Optimize Imports）触发一次重分析
组件库按需导入后智能提示不生效的硬解法
TDesign、Element Plus、Ant Design Vue 等库开启按需导入（如 import Button from 'tdesign-vue-next/es/button'）后，WebStorm 常常无法识别导出成员，补全列表为空。这不是 bug，是路径映射未穿透到语言服务层。
- 在
tsconfig.json的paths里补全具体子路径映射，例如："tdesign-vue-next/es/button": ["node_modules/tdesign-vue-next/es/button/index.d.ts"]—— 不要只配顶层别名 - WebStorm 的
JavaScript | Libraries设置中，找到tdesign-vue-next对应的条目，点开 “Dependencies” → 勾选 “Include subdirectories” 并确保es/和lib/都被扫描 - 若仍无效，临时在
shims-vue.d.ts里加一句declare module 'tdesign-vue-next/es/*' { const x: any; export default x; }，让类型系统“认出”该路径结构，提示即可恢复
模块热更新（HMR）失败时调试入口在哪
Vite 或 Webpack HMR 失效（改代码页面不刷新、控制台无 HMR log），90% 情况下不是构建配置问题，而是 WebStorm 的运行配置没把 HMR 协议纳入监听范围。
- 检查
Run Configuration中 URL 字段是否带?hmr或&hmr参数 —— WebStorm 内置浏览器默认不转发 HMR websocket 请求，必须用真实浏览器访问（如http://localhost:5173），且该地址要和运行配置中填的一致 - 确保
Settings | Languages & Frameworks | JavaScript | Libraries下启用了 “Enable JavaScript language service”，否则 HMR 状态变更无法被 IDE 捕获，断点会卡在旧代码位置 - 修改
.vue文件中的<style></style>块时 HMR 不触发？这是 Vite 的默认行为，需在vite.config.ts中显式配置css.hotReload为true，WebStorm 不会自动注入此选项
package.json 中 "exports" 字段的支持程度 —— 它只识别标准格式，对条件导出（"import", "require", "default" 嵌套）解析不稳定。一旦你发现某个包的 ESM 导入提示异常，优先看它的 exports 是否用了非标准写法，而不是怀疑自己的配置。
