Node NPM Script Runner
一个 VSCode 插件,在 Activity Bar 侧边栏展示工作区所有 package.json 的 scripts 列表,支持一键运行/停止,并通过 环境预设(Profile) 统一管理 Node 版本、Whistle 代理规则、自定义环境变量和访问地址,运行脚本时自动切换。
功能特性
- 📋 Scripts 列表展示 — 自动解析工作区所有
package.json 的 scripts,在侧边栏 TreeView 中展示
- ▶️ 一键运行/停止 — 点击即可在终端中运行脚本,支持运行状态实时显示(加载动画)
- 📦 环境预设(Profile) — 将 Node 版本、Whistle 代理规则、自定义环境变量、访问地址打包为可复用的环境预设,一键绑定到脚本
- 🌐 Whistle 代理集成 — Profile 中配置 Whistle 规则,运行脚本时自动激活对应规则,停止时自动禁用
- 🔢 自定义环境变量 — Profile 支持配置任意环境变量,运行时自动注入终端
- 🔗 访问地址 — Profile 支持配置服务访问 URL,方便记录和查看
- 📁 多 package.json 支持 — 工作区包含多个
package.json 时自动分组展示
- 🔄 自动刷新 — 监听
package.json 文件变化,自动更新列表
- 🛠️ 多包管理器 — 支持 npm、yarn、pnpm
- 🤖 AI 助手集成 — 注册 Language Model Tools,Copilot 等 AI 助手可直接运行/停止脚本、查看状态和环境预设
使用方式
基本操作
- 打开包含
package.json 的项目
- 点击左侧 Activity Bar 中的 NPM Scripts 图标打开侧边栏面板
- 点击脚本名称或右侧的 ▶️ 按钮运行脚本,运行中点击 ⏹ 停止
- 点击脚本右侧的 📦 按钮为该脚本绑定环境预设
- 点击面板标题栏的 ⚙️ 按钮打开全局设置
环境预设(Profile)
环境预设是本插件的核心概念,将多项运行环境配置打包为一个可复用的组合:
| 配置项 |
说明 |
示例 |
| Node 版本 |
通过 nvm 切换 Node 版本 |
v18.19.0、v20.10.0 |
| Whistle 代理规则 |
自动激活/禁用 Whistle 规则 |
test-server-rule |
| 环境变量 |
运行时注入自定义环境变量 |
API_BASE=https://test.com |
| 访问地址 |
记录服务的访问 URL |
http://localhost:3000 |
| 描述 |
备注此 Profile 的用途 |
连接测试服后端,开启调试模式 |
创建 Profile
- 方式一:全局设置(⚙️) → 创建环境预设
- 方式二:脚本 📦 按钮 → 创建新的 Profile
- 方式三:命令面板 →
Create Environment Profile
绑定 Profile 到脚本
点击脚本右侧的 📦 按钮,从列表中选择已有的 Profile 即可绑定。绑定后脚本描述中会显示 📦 Profile名称。
编辑/删除 Profile
全局设置(⚙️) → 编辑环境预设,可修改 Profile 的各项配置或删除整个 Profile(删除时会自动解除所有脚本的绑定关系)。
全局设置
点击面板标题栏的 ⚙️ 按钮可配置:
- Whistle 代理端口 — 设置 Whistle 服务端口号
- 创建/编辑环境预设 — 管理 Profile
运行环境解析
脚本运行时,插件按以下顺序解析环境配置:
绑定的 Profile → 系统默认
- 如果脚本绑定了 Profile,则使用该 Profile 中的 Node 版本、Whistle 规则、环境变量等配置
- 如果未绑定 Profile,则使用系统默认环境(不做任何版本切换或代理配置)
Whistle 代理集成
插件同时兼容 Whistle 命令行版 和 Whistle 桌面客户端,采用三层降级策略:
规则激活:
- HTTP API — 标准
/cgi-bin/rules/select 接口(命令行版 Whistle)
- 桌面客户端 API —
/cgi-bin/rules/project + x-whistle-special-auth
- w2 命令行 — 最终降级方案
规则禁用:
- HTTP API — 标准
/cgi-bin/rules/unselect 接口
- 文件系统 — 直接修改
properties 文件中的 selectedList(桌面客户端)
- w2 命令行 — 最终降级方案
规则列表获取同样支持 HTTP API 和文件系统两种方式,确保在各种 Whistle 安装方式下都能正常工作。
配置项
| 配置项 |
说明 |
默认值 |
nodeNpmScript.profiles |
环境预设定义,每个 Profile 可包含 nodeVersion、whistleRule、env、url、description |
{} |
nodeNpmScript.scriptProfiles |
脚本与环境预设的绑定关系,格式: { "scriptName": "profileName" } |
{} |
nodeNpmScript.nvmDir |
NVM 安装目录路径 |
$NVM_DIR 或 ~/.nvm |
nodeNpmScript.packageManager |
包管理器(npm / yarn / pnpm) |
"npm" |
nodeNpmScript.whistlePort |
Whistle 代理服务端口号 |
8899 |
nodeNpmScript.whistlePath |
w2 命令路径(默认自动检测) |
"" |
nodeNpmScript.mcpPort |
MCP Server 监听端口号 |
3580 |
nodeNpmScript.mcpAutoStart |
插件激活时自动启动 MCP Server |
false |
命令列表
| 命令 |
说明 |
触发方式 |
nodeNpmScript.runScript |
运行脚本 |
脚本行内 ▶️ 按钮 / 点击脚本名称 |
nodeNpmScript.stopScript |
停止脚本 |
运行中脚本行内 ⏹ 按钮 |
nodeNpmScript.configureProfile |
为脚本绑定环境预设 |
脚本行内 📦 按钮 |
nodeNpmScript.createProfile |
创建环境预设 |
命令面板 |
nodeNpmScript.editProfile |
编辑环境预设 |
命令面板 |
nodeNpmScript.globalSettings |
打开全局设置 |
面板标题栏 ⚙️ 按钮 |
nodeNpmScript.refresh |
刷新脚本列表 |
面板标题栏 🔄 按钮 |
nodeNpmScript.toggleMcp |
启动/关闭 MCP Server |
面板标题栏 📡 按钮 / 状态栏 |
License
MIT
| |