VSCode 中快速执行 package.json 脚本需启用 NPM 脚本视图、通过命令面板运行、配置快捷键或在集成终端手动调用；确保 package.json 存在且 scripts 非空，按 Cmd+Shift+P 输入对应命令即可操作。
如果您在使用 vscode 进行前端开发时希望快速执行 package.json 中定义的 npm 脚本，但未看到脚本列表或无法一键运行，则可能是由于内置 npm 脚本支持未正确启用或配置。以下是启用并高效使用该功能的具体方式：
本文运行环境：MacBook Pro，macOS Sequoia。
VSCode 提供了独立的 NPM 脚本侧边栏，需手动激活才能显示所有可运行脚本，其本质是读取当前工作区根目录下的 package.json 文件并解析 scripts 字段。
1、确保项目根目录下存在有效的 package.json 文件且其中包含非空的 "scripts" 对象。
2、按下 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux）打开命令面板。
立即学习“前端免费学习笔记（深入）”；
3、输入 NPM Scripts 并选择 NPM: Toggle Script Explorer。
4、NPM 脚本视图将出现在资源管理器侧边栏底部，展开后可见全部脚本名称及对应命令。
无需打开脚本视图，VSCode 允许通过命令面板快速触发任意已定义脚本，适用于临时执行单次任务，不依赖图形界面状态。
1、按下 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux）。
2、输入 NPM: Run Script 并回车。
3、VSCode 将列出当前 workspace 中所有 package.json 的 scripts 条目，使用方向键选择目标脚本后回车即可执行。
4、终端面板自动弹出并显示执行过程与输出结果，支持实时查看日志。
为高频脚本（如 dev、build、test）分配专属快捷键，可跳过菜单交互，实现毫秒级触发，提升日常开发节奏。
1、打开 VSCode 设置，搜索 keyboard shortcuts，点击进入快捷键设置页。
2、点击右上角 打开键盘快捷方式 JSON 图标（文件夹带花括号）。
3、在数组内添加新对象，例如绑定 npm run dev 到 Cmd+Alt+D：
"key": "cmd+alt+d", "command": "npm.runScript", "args": {"script": "dev"}
4、保存文件，重启终端或重新加载窗口后快捷键立即生效。
VSCode 集成终端保留完整 Shell 环境，支持原生 NPM 命令及 Shell 特性（如管道、变量、条件判断），适合调试复杂脚本链或组合操作。
1、按 Ctrl+`（Mac/Windows/Linux 通用）唤出集成终端。
2、确认当前路径为含 package.json 的项目根目录，可通过 pwd 和 ls package.json 验证。
3、输入 npm run [script-name]，例如 npm run build。
4、执行后按 ↑ 键可循环调出最近执行过的 NPM 命令，避免重复输入。
以上就是VSCode内置的NPM脚本支持：前端工程化利器的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
163
收藏
