webstorm需创建永久npm运行/调试配置才能稳定执行和调试npm脚本：右键package.json→run生成临时配置→edit configurations中勾选allow multiple instances、scripts填dev、browser/live edit填服务地址（如http://localhost:3000），并设置正确包管理器（npm/yarn/pnpm）。
WebStorm 能直接运行 npm 脚本，但双击执行只是临时配置，不保存参数、不继承环境变量、调试进不了断点——真要稳定运行或联调前端服务，必须建永久的 NPM 运行/调试配置。
怎么让 npm 脚本在 WebStorm 里真正“跑起来”
WebStorm 的 npm 工具窗口会自动扫描项目根目录下的 package.json，把 scripts 字段里所有命令列成树状结构。你双击就能执行，输出显示在底部面板，支持点击跳转错误行——这很轻量，但仅限“执行”，不是“运行配置”。
- 没看到
npm工具窗口？按 Shift 两次搜npm scripts，或右键package.json→ Show npm Scripts - 多个
package.json（比如 monorepo 子包）？点工具栏+添加，每棵树独立，互不影响 - 脚本名点一下就执行，但输出里出现
command not found或ENOTEMPTY？大概率是包管理器没对上（见下一条）
为什么 npm install 失败，或者装了依赖却报错
WebStorm 默认调用系统 PATH 里的 npm，但它会根据项目锁文件（yarn.lock 或 pnpm-lock.yaml）尝试自动切换包管理器——这个行为不提示、不报错，静默回退到 npm 模式是常见坑点。
- 检查右下角状态栏：是否显示
yarn或pnpm图标？没显示就很可能用了错的包管理器 - 进
Settings → Languages & Frameworks → JavaScript → Runtime，确认Package manager指向你项目实际用的命令（比如pnpm） - 手动触发安装时，别只点
npm install；右键package.json→ 选Run 'pnpm install'或Run 'yarn install'更稳妥
怎么调试 dev 脚本（比如 vite dev 或 vue-cli-service serve）
单纯点“运行”只是起服务；想改代码实时刷新、进断点、看 console、调试 JS 逻辑，必须告诉 WebStorm：“这是一个 Web 服务，地址是啥”。否则点虫子图标会无响应或报错。
- 先运行一次脚本（比如双击
dev），然后去Run → Edit Configurations…找到刚生成的条目 - 在
Scripts字段明确填入dev（不要写npm run dev） - 切到
Browser / Live Edit标签页，勾选After launch，填入真实服务地址，例如：http://localhost:5173（vite）、http://localhost:3000（create-react-app） - 保存后点 ▶️ 旁的虫子图标，就能进断点、改 CSS 实时生效
团队协作时怎么避免每人重配一遍
双击脚本生成的是临时配置，关掉就丢；而像 npm run dev 这种高频入口，必须存为永久配置，否则队友拉完代码还得重来。
- 在
Run → Edit Configurations…里找到那个半透明图标的配置（就是你刚用过的临时配置） - 勾选
Store as project file，它会生成一个.idea/runConfigurations/xxx.xml文件，提交进 Git - 如果要同时启动前后端，用
Compound配置：新建一个复合配置，把client和server的 npm 配置都加进去
最常被忽略的是包管理器匹配和 Browser/Live Edit 地址——这两处一错，整个调试链就断了，但错误表现往往只是“没反应”或“断点不命中”，容易往代码逻辑上瞎查。
