VSCode可通过启用NPM脚本视图、命令面板运行、快捷键绑定及安装扩展（如NPM Scripts）实现package.json脚本的一键执行与增强管理。
如果您在使用 VSCode 进行前端开发，希望快速执行 package.json 中定义的 NPM 脚本，但每次都要切换到终端手动输入 npm run xxx，则可以启用并配置 VSCode 的内置 NPM 脚本支持功能。以下是启用该功能并实现在侧边栏运行命令的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、启用 NPM 脚本视图
VSCode 默认提供 NPM 脚本视图，但需确保工作区包含有效的 package.json 文件，且该文件中定义了 scripts 字段。启用后，NPM 脚本将作为独立面板显示在资源管理器侧边栏底部。
1、确保当前打开的文件夹根目录下存在 package.json 文件，且其中包含非空的 "scripts" 对象（例如："dev": "vite"）。
2、点击左侧活动栏最下方的 “…（更多操作）”图标，在弹出菜单中勾选 “NPM 脚本”。
3、若未出现该选项，可按下 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux），输入 “NPM: Focus on Scripts View” 并回车执行。
二、通过命令面板触发脚本
当 NPM 脚本视图不可见或需快速调用时，可通过命令面板直接运行任意已定义脚本，无需打开侧边栏面板。
1、按下 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux）打开命令面板。
2、输入 “NPM: Run Script”，选择该命令。
3、在随后出现的下拉列表中，从当前 workspace 的 package.json 中选择目标脚本名称（如 build 或 test）。
4、按回车确认，VSCode 将在集成终端中自动执行对应命令，并显示实时输出。
三、自定义脚本快捷键绑定
为高频脚本（如 dev、build）分配专属快捷键，可绕过菜单与面板交互，实现一键触发。
1、按下 Cmd+K Cmd+S（Mac）或 Ctrl+K Ctrl+S（Windows/Linux）打开键盘快捷方式设置。
2、点击右上角 “+”号 添加新快捷键。
3、在“命令”字段中输入 npm.runScript，在“键”字段中按下期望组合键（如 Cmd+Alt+B）。
4、在“参数”字段中填入 JSON 格式对象：{"script":"build"}（将 build 替换为实际脚本名）。
四、使用扩展增强脚本管理
原生 NPM 脚本视图功能有限，部分高级操作（如并行执行、参数传入、脚本分组）需依赖社区扩展补充。
1、在扩展市场中搜索并安装 “NPM Scripts” by eg2（ID：eg2.tsl-problem-matcher）或 “Auto Close Tag” 不相关，应选 “NPM Intellisense” 以辅助脚本名补全。
2、安装后重启 VSCode，重新打开含 package.json 的文件夹。
3、右键点击 NPM 脚本视图中的某条脚本，可看到新增选项如 “Run in Terminal”、“Debug Script”（若配置了 launch.json）等。
4、对于带参数的脚本（如 "serve --port 4000"），可在扩展提供的输入框中手动追加参数并执行。
