VSCode 中可通过启用 NPM 脚本视图、资源管理器集成、带参运行、快捷键绑定及调试功能高效执行 package.json 脚本。
如果您在 VSCode 中希望快速运行项目中的 NPM 脚本，但未找到直观的交互式界面，则可能是由于未启用或未正确配置内置的 NPM 脚本视图。以下是启用并高效使用该功能的操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、启用 NPM 脚本视图
NPM 脚本视图是 VSCode 内置的侧边栏面板，用于自动识别当前工作区中 package.json 文件定义的所有脚本，并以可点击方式呈现。启用后无需终端输入命令即可一键执行。
1、确保当前打开的文件夹为包含 package.json 的有效 Node.js 项目根目录。
2、按下 Cmd+Shift+P（macOS）或 Ctrl+Shift+P（Windows/Linux）打开命令面板。
3、输入 NPM Scripts，选择 NPM: Toggle Script Explorer 并回车。
4、右侧活动栏将出现一个 NPM Scripts 图标，点击即可展开脚本列表。
二、通过资源管理器快速访问
VSCode 支持在资源管理器中直接集成 NPM 脚本节点，使脚本入口与文件结构同屏可见，便于上下文关联操作。
1、打开 VSCode 设置（Cmd+, ），切换至设置搜索框。
2、输入 npm.enableScriptExplorer，确认其值为 true。
3、在资源管理器顶部工具栏点击 …（更多操作），勾选 Show NPM Scripts。
4、刷新资源管理器，底部将新增 NPM Scripts 区域，显示所有已定义脚本。
三、运行带参数的脚本
部分 NPM 脚本需传入参数（如 --watch、--port=3001），内置管理器支持在执行前动态注入参数，避免手动编辑 package.json。
1、在 NPM Scripts 视图中右键目标脚本（例如 dev）。
中英文双语版; 后台在同一页内同时管理添加修改资料内的中英文内容; 网站的左边栏使用了模块，可以自由的增加&删除; 可以不用修改代码，让不懂编写网页的人也可以有自己的公司(企业)网站，基本资料都在后台管理添加修改; 网站的标题、地址、版权、公司邮局、收藏、风格等资料可以在后台的"网站资料设置"里管理; 功能强大的eWebEditor在线编辑器; 有多种模板可供选择，使用
2、选择 Run Script with Arguments。
3、在弹出的输入框中键入参数，例如 --port=4000 --host=0.0.0.0，然后回车。
4、VSCode 将启动集成终端并执行 npm run dev -- --port=4000 --host=0.0.0.0。
四、自定义脚本别名快捷键
为高频脚本分配键盘快捷键，可跳过视图展开与鼠标点击，实现秒级触发，提升开发流效率。
1、打开快捷键设置（Cmd+K Cmd+S）。
2、点击右上角 + 添加快捷键 按钮。
3、在命令输入框中键入 npm.runScript，按提示填写脚本名称（如 build）。
4、按下期望组合键（如 Cmd+Alt+B），点击 Enter 确认绑定。
五、调试 NPM 脚本
当脚本执行异常时，可直接在 VSCode 中附加调试器，查看进程输出、错误堆栈及环境变量，无需切换至外部终端。
1、在 NPM Scripts 视图中右键目标脚本（如 test）。
2、选择 Debug Script。
3、若项目未配置 .vscode/launch.json，VSCode 将自动创建默认 Node.js 调试配置。
4、调试控制台将显示实时日志，断点可在脚本调用的源码文件中直接设置。
