VSCode中管理NPM脚本的便捷方式

vscode可通过内置npm Scripts视图和npm Script Runner扩展实现脚本的快速运行、调试与管理；支持分组命名、子脚本组合及注释说明以提升可维护性。

在 VSCode 中管理 npm 脚本，不需要反复切到终端敲命令——用好内置功能和少量扩展，就能点一点运行、调试、甚至可视化查看脚本依赖关系。

直接从侧边栏运行脚本（无需插件）

VSCode 自带的 NPM Scripts 视图是最快上手的方式。只要项目根目录有 package.json，它就会自动识别并展开所有脚本。

• 打开资源管理器（Ctrl+Shift+E），点击顶部“…”按钮 → 选择 “显示 NPM 脚本”
• 展开后双击任意脚本名即可执行（如 dev、build）
• 右键脚本可选择“在集成终端中运行”或“在外部终端中运行”，适合需要交互输入或长时间运行的任务

用 npm Script Runner 快速触发常用命令

官方 NPM Scripts 视图不支持快捷键绑定或一键多脚本，这时可以装轻量扩展 npm Script Runner（by eg2）。

• 安装后按 Ctrl+Shift+P → 输入 “NPM: Run Script”，列表会动态显示所有脚本
• 支持模糊搜索，比如输 test 就能匹配 test、test:watch、e2e:test
• 可在 settings.json 中配置快捷键，例如为 dev 绑定 Ctrl+Alt+D

调试 npm 脚本像调试代码一样

很多脚本本质是 node.js 进程（比如 node scripts/build.js），完全可以断点调试。

• 在 .vscode/launch.json 中新增一个配置，类型选 node.js
• program 指向 node_modules/.bin/ts-node 或直接写 node，再通过 args 传入脚本路径（如 ["./scripts/start.js"]）
• 如果脚本由 npm run xxx 启动，也可用 runtimeExecutable 指向 npm，args 设为 ["run", "dev"]

让 package.json 更清晰可维护

脚本一多就容易混乱，配合简单约定能大幅提升可读性与协作效率。

• 按语义分组命名：用冒号分隔作用域，如 lint:js、lint:css、test:unit、test:e2e
• 把长命令拆成可复用的子脚本，再用 && 或 npm-run-all 组合，比如：
  "build": "npm-run-all clean:dist build:js build:css"
• 在脚本注释里加简短说明（VSCode 不解析，但团队成员一眼看懂），例如：
  "dev": "vite --open // 启动本地开发服务器并自动打开浏览器"