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 // 启动本地开发服务器并自动打开浏览器"
