VSCode中启用NPM脚本需确保项目根目录含有效package.json，通过侧边栏打开NPM视图，支持双击、右键运行或传参，可配置终端复用与手动刷新，并通过launch.json实现调试。
如果您在 VSCode 中无法直接查看或运行 package.json 中定义的脚本，则可能是由于 NPM 脚本功能未启用、项目结构不匹配或配置缺失所致。以下是启用并使用 VSCode 内置 NPM 脚本支持的具体操作路径：
本文运行环境：MacBook Pro M3，macOS Sequoia
一、确认项目根目录与 package.json 存在性
VSCode 的内置 NPM 脚本视图仅在打开的文件夹为项目根目录（即包含 package.json 文件）时才激活。若当前工作区为子目录或未打开任何文件夹，NPM 脚本面板将不可见或为空。
1、确保已通过 File → Open Folder… 打开包含 package.json 的完整项目文件夹。
2、在资源管理器中确认 package.json 文件位于最顶层，且其 scripts 字段非空，例如："scripts": {"dev": "vite", "build": "vite build"}。
3、若 package.json 不存在，需先在集成终端中执行 npm init -y 生成基础文件。
二、启用并打开 NPM 脚本侧边栏
VSCode 自带 NPM 脚本浏览器，无需额外安装插件，但需手动调出视图面板。该功能依赖于工作区识别与 JSON 解析能力，仅对标准格式的 package.json 生效。
1、点击左侧活动栏中 四个方块组成的扩展图标（Extensions）旁的“NPM”图标；若未显示，请按 Cmd+Shift+P 调出命令面板，输入 NPM: Focus on NPM Scripts View 并回车。
2、首次加载可能需要数秒，脚本列表将按字母顺序展开，每个脚本名后附带灰色小字说明（如来自 script 字段注释）。
3、若面板仍为空，请检查文件编码是否为 UTF-8，且 package.json 中无语法错误（如末尾多余逗号、单引号替代双引号）。
三、运行脚本的三种方式
VSCode 提供多重交互路径执行脚本，适配不同参数复杂度与复用需求。所有运行均默认复用同一集成终端实例，除非显式禁用复用设置。
1、双击脚本名称——适用于无参数、无环境变量的快捷执行，例如 dev 或 test。
2、右键脚本 → 选择 Run Script in Terminal——适用于需手动追加参数场景，如运行 npm run build -- --mode staging。
3、右键脚本 → 选择 Run Script with Arguments…——弹出输入框，直接填写参数（不含 npm run 脚本名），例如输入 --host 0.0.0.0 --port 4173 即可触发完整命令。
四、配置终端复用与刷新行为
默认情况下，每次双击脚本会新建终端标签页，易造成终端面板混乱；同时脚本列表不会随 package.json 编辑自动更新，必须主动刷新才能同步新增或修改的脚本。
1、启用终端复用：打开 Settings（Cmd+,），搜索 npm.script.terminal.reuse，勾选该项；或在 settings.json 中添加 "npm.script.terminal.reuse": true。
2、手动刷新脚本列表：点击 NPM 脚本视图右上角的 ↻ 刷新图标；或在视图空白处右键选择 Refresh；或使用快捷键 Cmd+R。
3、验证刷新生效：修改 package.json 中 scripts 字段（如新增 "preview": "vite preview"），保存后执行刷新操作，新脚本应立即出现在列表顶部附近。
五、调试 npm 脚本的必要配置
VSCode 内置 NPM 脚本管理器本身不提供调试能力，但可通过 launch.json 关联 Node.js 运行时，实现断点调试、变量监视等开发功能。此方式仅适用于可被 Node.js 直接执行的脚本（如自定义 CLI、Jest、Mocha 测试入口）。
1、按下 Cmd+Shift+P，输入 Debug: Open launch.json，选择 Node.js: NPM Script 模板。
2、在生成的配置中，将 "script" 字段值设为 package.json 中的目标脚本名，例如 "test"。
3、保存 launch.json 后，返回 NPM 脚本视图，对应脚本旁将出现 绿色虫子图标，点击即可启动调试会话。
