webstorm可直接运行npm脚本：自动识别package.json中scripts，双击执行并显示输出；调试需配置browser/live edit地址；包管理器需匹配yarn/pnpm；高频脚本应保存为永久配置。
npm脚本在WebStorm里点一下就运行，根本不用手动开终端
WebStorm 自带 npm 工具窗口，只要项目里有 package.json，它就能自动识别 scripts 字段里的所有命令（比如 dev、build、test），并以树状结构列出来。你双击就能跑，输出直接显示在底部面板，和终端效果一致，但更轻量、可点击跳转错误行。
- 确保已安装 Node.js（npm 会随它一起装好）；如果要用
yarn或pnpm，得单独装，并在 Settings → Languages & Frameworks → JavaScript → Runtime 里选对包管理器 - 如果没看到
npm工具窗口，按 Shift 两次搜npm scripts，或右键package.json→ Show npm Scripts - 多个
package.json（如 monorepo 子包）？点击工具栏+号添加，每棵树独立，不会互相覆盖
调试 npm 脚本（比如 vue dev 或 vite dev）要配 browser / live edit
单纯“运行”脚本只是执行命令；想边改代码边刷新、断点调试前端逻辑，必须告诉 WebStorm：这脚本起的是一个 Web 服务，地址是多少。否则点“调试”按钮会报错或无响应。
- 打开 Run → Edit Configurations，选中你的
npm配置（比如叫npm run dev） - 切换到 Browser / Live Edit 标签页
- 勾选 After launch，填入服务实际访问地址，例如：
http://localhost:5173（vite 默认）、http://localhost:3000（create-react-app） - 保存后点 ▶️ 旁的虫子图标，就能进断点、看
console、改 CSS 实时生效
“运行 npm install”失败？大概率是包管理器没对上
WebStorm 默认用系统 npm，但如果你项目用的是 yarn（有 yarn.lock）或 pnpm（有 pnpm-lock.yaml），它可能自动切过去——也可能没切，导致 npm install 装错依赖、甚至报 ENOTEMPTY 错误。
- 检查右下角状态栏：是否显示
yarn或pnpm图标？没显示就可能是默认用了npm - 确认路径：进 Settings → Languages & Frameworks → JavaScript → Runtime，看
Package manager是否指向你当前项目真正用的命令 - 手动触发安装时，别只点
npm install，先右键package.json→ 选 Run 'yarn install' 或 Run 'pnpm install' 更稳妥
临时配置 vs 永久配置：团队协作时别忘了存成文件
你双击脚本运行时，WebStorm 默认建的是“临时配置”，关掉就丢；但像 npm run dev 这种高频调试入口，应该保存为永久配置，不然队友拉代码后还得重配一遍。
- 运行一次后，在 Run → Edit Configurations 里找到刚用过的那个半透明图标配置
- 选中它，点工具栏
Save Configuration（或按Ctrl+S），它就会变成不透明图标 - 默认存到
.idea/runConfigurations/下，如果团队不用共享.idea，记得勾选 Store as project file，它会生成一个.run.xml文件进 Git
容易被忽略的是：WebStorm 不会自动把 node_modules 路径或环境变量（比如 VUE_APP_ENV=staging）同步进配置——这些得手动填在 Environment variables 里，否则本地能跑，CI 或别人机器上就挂。
