WebStorm可直接右键package.json→Show npm Scripts运行脚本：自动识别scripts字段并树状展示，双击执行；需确保Node.js已安装、package.json在根目录、包管理器匹配（如pnpm-lock.yaml则选pnpm），调试须配置Browser/Live Edit地址。
右键 package.json 就能直接运行脚本
WebStorm 会自动识别 package.json 中的 scripts 字段，只要项目结构正常、Node.js 已安装，双击或右键就能跑，根本不用开终端。常见现象是：右键 package.json → 出现 Show npm Scripts 菜单项 → 点击后右侧或底部弹出树状面板，里面列着 dev、build、test 等命令。
注意这一步的前提：
-
package.json必须在项目根目录（不是子目录），否则 WebStorm 不会主动扫描 - 如果没看到菜单项，按
Shift两次，输入npm scripts手动唤出面板 - 面板里脚本名是灰色的？说明当前 package manager 没匹配上——比如项目用
pnpm但 WebStorm 默认走npm
运行失败时先看右下角包管理器图标
WebStorm 运行 npm run dev 实际调用的是你系统 PATH 里的对应命令，不是内置引擎。所以终端能跑的，这里应该也能跑；终端报错，这里大概率一样报错。
典型错误：command not found: pnpm 或 ENOTEMPTY —— 很可能是因为 WebStorm 没切换到你项目实际用的包管理器。
检查和修复方法：
- 看右下角状态栏：是否显示
npm、yarn或pnpm图标？没显示就默认用了npm - 进
Settings → Languages & Frameworks → JavaScript → Runtime，确认Package manager选的是你项目锁文件对应的工具（yarn.lock→ 选yarn，pnpm-lock.yaml→ 选pnpm） - 如果项目有多个
package.json（比如 monorepo），点击 npm 面板右上角+号手动添加子路径，不能只靠自动发现
调试前端服务必须填 Browser / Live Edit 地址
点 ▶️ 运行 dev 脚本没问题，但点 ? 调试时卡住、没反应、或者报 Connection refused？问题不在代码，而在 WebStorm 不知道这个脚本起的是哪个 URL 的服务。
正确做法：
- 运行一次
npm run dev后，在Run → Edit Configurations…里找到刚生成的配置（名称类似npm run dev） - 切换到
Browsers / Live Edit标签页 - 勾选
After launch，填入真实服务地址，例如：http://localhost:5173（Vite）、http://localhost:3000（CRA）、http://localhost:8080（Vue CLI） - 保存后点虫子图标，才能断点、热更新、实时改样式
漏掉这步，调试按钮只是启动进程，不会打开浏览器，也不会注入调试脚本。
高频脚本要存成永久配置，别依赖临时运行
双击脚本运行时，WebStorm 创建的是临时配置：关掉 IDE 就丢，不带参数、不继承环境变量、无法复用、队友拉代码后也得重配。
真正要用的开发入口（比如 dev、test:watch）必须转成永久配置：
- 右键
package.json→Run 'npm run dev'（首次触发临时配置） - 点右上角运行配置下拉框 →
Edit Configurations…→ 找到那个半透明图标的条目 - 勾选
Allow multiple instances（避免 HMR 重启时被强制终止） - 确保
Scripts字段只填dev，不要写成npm run dev（WebStorm 自动拼接） - 点
OK保存，下次就能从下拉菜单直接选，且配置随项目存到.idea/runConfigurations/下
临时配置看着快，但真进调试、加参数、传环境变量时，它连字段都不可编辑——这点最容易被忽略。
