不只是运行 JS更是一个集「包管理、镜像管理、依赖管理、版本查看、NPM Script、一键 Debug、多终端运行」于一体的 VS Code / Cursor 开发工具。在日常前端和 Node.js 开发中你是不是经常遇到这些问题npm、pnpm、yarn、bun 到底该用哪个项目 A 用 npm项目 B 用 pnpm每个项目还不一样npm 下载太慢需要频繁修改.npmrcnode_modules出问题需要手动删除后重新安装package.json写的是一个版本实际安装的又是另一个版本想知道项目到底安装了哪个版本的依赖一个项目里有几十个package.json找 NPM Script 很麻烦npm run dev可以运行但想断点调试还要自己配置launch.json同时运行多个前端项目需要不断创建、切换终端升级一个前端项目的依赖经常需要在终端里反复输入命令JS Runner Kit 就是为解决这些开发痛点而设计。下面图片可以查看项目所有依赖包在详情页面下拉表可以对一个库下载多个版本选择当前使用版本⭐ 核心能力1. 一个插件管理 npm / yarn / pnpm / bunJS Runner Kit 支持多种 Node.js 包管理器npmyarnpnpmbunCustom可以为不同项目、不同 package独立选择 Package Manager。例如my-project ├── frontend → pnpm ├── backend → npm └── packages/core → yarn无需因为不同项目使用不同包管理器而反复修改命令。插件支持auto自动检测package.json ↓ packageManager ↓ lockfile ↓ npm会根据项目中的packageManager、pnpm-lock.yaml、yarn.lock、bun.lock、package-lock.json等信息判断应该使用哪个包管理器。2. 一键切换 NPM 镜像仓库前端开发中一个非常常见的问题npm 下载太慢怎么办以前可能需要手动执行npmconfigsetregistry https://registry.npmmirror.com或者修改.npmrc现在直接在项目侧边栏选择 Registry 即可。支持npm Official Yarn Official npmmirror Tencent Cloud Huawei Cloud CNPM Aliyun NPM USTC NetEase Gitee Custom也可以直接配置自己的私有 NPM Registry。例如Registry ↓ npmmirror ↓ Install Dependencies插件会自动将选择的 Registry 写入对应项目的.npmrc。 私有 NPM 仓库同样适用例如公司内部https://npm.company.com/直接选择Registry → Custom即可使用自己的 npm 仓库。这对于企业内部 npm私有组件库内网项目公司镜像仓库自建 Verdaccio都非常方便。3. 一键安装项目依赖以前安装依赖cdprojectnpminstall如果node_modules有问题rm-rfnode_modulesnpminstallWindows 下还需要处理不同的删除方式。现在Install Dependencies → 一键安装插件会自动选择 Package Manager ↓ 选择 Registry ↓ 进入项目目录 ↓ 执行 install ↓ 独立 Terminal例如pnpm install或者npm install或者yarn install全部由插件自动处理。4. node_modules 一键重装当项目出现Module not found或者Cannot find package或者依赖版本异常最常见的解决方式就是删除 node_modules 重新安装JS Runner Kit 在安装依赖时可以检测当前项目是否存在node_modules。可以选择Delete node_modules ↓ 重新安装 Dependencies不用再手动输入删除命令。5. 查看「声明版本 vs 实际安装版本」这是 JS Runner Kit 非常实用的功能之一。打开View Installed Packages即可看到项目依赖的详细信息。例如PackageDeclaredInstalledTypevite^6.0.06.1.0Developmentreact^19.0.019.0.1Productionaxios^1.7.01.7.9Productiontypescript^5.0.05.7.2Development可以直观看到package.json ↓ 声明版本 ↓ node_modules ↓ 实际安装版本支持ProductionDevelopmentPeerOptional等不同依赖类型。6. 依赖包多版本管理前端大型项目最容易遇到的问题之一同一个 npm 包为什么项目里出现多个版本例如node_modules │ ├── debug2.x └── some-package └── node_modules └── debug4.x这时候package.json看到的版本和实际运行时使用的版本可能完全不同。JS Runner Kit 可以帮助你从项目的依赖关系和实际安装结果中查看版本情况。例如debug Declared: ^4.3.0 Installed: 4.3.7同时可以快速定位对应的node_modules/debug或者node_modules/some-package/node_modules/debug对于排查依赖冲突多版本依赖lockfile 问题依赖升级Node 项目升级前端框架升级非常实用。7. 前端 / Node 项目升级利器升级项目依赖时经常需要npmoutdatednpminstallnpmupdate然后不断查看package.json package-lock.json node_modulesJS Runner Kit 可以把其中非常多的重复操作集中到侧边栏。例如Project │ ├── Package Manager │ └── pnpm │ ├── Registry │ └── npmmirror │ ├── Install Dependencies │ └── View Installed Packages升级依赖之后可以立即查看Declared Version VS Installed Version非常适合React 项目升级React React DOM Vite TypeScript ESLintVue 项目升级Vue Vite Vue Router Pinia TypeScriptNode.js 项目升级Express Koa NestJS Axios TypeScript JestMonorepo 项目packages/ ├── core ├── utils ├── components └── cli每个 package 都可以独立管理。8. NPM Script 一键 Debug这是 JS Runner Kit 和普通 NPM Script 管理工具非常大的区别。传统方式npmrun dev想断点调试通常还需要创建 launch.json ↓ 配置 program ↓ 配置 runtime ↓ 配置 cwd ↓ 启动 DebugJS Runner Kit 可以直接在 NPM Scripts 侧边栏对支持的 Node / JS 脚本显示 Debug例如{scripts:{dev:vite,server:node server.js,test:jest,tsx:tsx src/index.ts}}侧边栏直接出现NPM Scripts ▶ dev Debug ▶ server Debug ▶ test Debug ▶ tsx Debug点击 Debug。即可直接进入 VS Code / Cursor JavaScript Debugger。插件会尽可能解析脚本中的node vite tsx ts-node nodemon next jest .js .ts等 Node / JavaScript 相关执行入口并直接启动 Debug Session。9. 真正支持断点调试最重要的是不是简单给 npm script 加一个--inspect。JS Runner Kit 会尝试解析 NPM Scriptnpm run dev ↓ 解析 script ↓ 找到真实 Node/JS CLI ↓ 定位 node_modules/.bin ↓ 启动 JavaScript Debugger ↓ VS Code / Cursor Breakpoint因此可以直接在代码中functionstartServer(){constport3000;// ← 在这里打断点returnstart(port);}然后Debug NPM Script直接进入调试。10. ⚡ NPM Scripts 统一管理打开 JS Runner Kit 后不需要再到不同的package.json里面寻找 scripts。插件会自动扫描工作区中的package.json。例如一个 Monorepoproject │ ├── package.json │ ├── packages │ ├── core │ │ └── package.json │ │ │ ├── web │ │ └── package.json │ │ │ └── server │ └── package.json侧边栏统一展示NPM Scripts project ▶ dev ▶ build ▶ test packages/core ▶ dev ▶ build packages/web ▶ dev Debug packages/server ▶ dev Debug无需不停打开不同的package.json。11. 快速搜索项目 Package大型项目尤其是 Monorepopackages/ ├── package-a ├── package-b ├── package-c ├── package-d ├── package-e └── ...包多了以后找 Script 非常麻烦。JS Runner Kit 支持直接搜索 Package Path。可以搜索packages/web或者core快速定位对应 package。12. 常用 Package / Script 一键置顶如果你每天都在使用frontend backend vite dev build test可以直接 Pin。置顶以后 frontend backend dev test ────────────── 其他 Packages常用项目和脚本始终保持在最上面。13. ️ 真正的多终端并行运行JS Runner Kit 不只是npmrun dev而是为每次运行创建独立 Terminal。例如同时运行Frontend npm run dev Backend npm run dev Watch npm run watch Docs npm run docs最终Running Scripts frontend → Terminal 1 backend → Terminal 2 watcher → Terminal 3 docs → Terminal 4互不干扰。可以直接从Running Scripts查看、聚焦或者停止对应任务。14. 不只是 NPM直接运行代码文件JS Runner Kit 同时支持直接运行当前文件。例如index.js server.js test.js script.ts Hello.py Hello.java可以直接▶ Run或者F4运行。也可以Ctrl F4在新的 Terminal 中运行不影响当前任务。15. 多语言 Interpreter除了 JavaScript / TypeScript还可以配置JavaScript → node TypeScript → node Python → python Java → java Shell → bash Go → go run Rust → rustc PHP → php Ruby → ruby Lua → lua因此它并不是一个单纯的NPM Script 插件而是逐渐成为一个通用代码运行 Node.js 项目管理工具。 JS Runner Kit 到底解决什么问题可以简单总结成JS Runner Kit │ ┌────────────────┼────────────────┐ │ │ │ 包管理 项目运行 Debug │ │ │ npm/yarn/pnpm NPM Scripts 一键 Debug bun/custom 多终端运行 Breakpoint │ │ │ Registry Run File JS Debugger npm镜像/私服 Interpreter Install node_modules Version 多版本依赖 特别适合这些场景前端项目开发React Vue Angular Next.js Nuxt Vite Electron统一管理npm scripts dependencies registry node_modules debugNode.js 项目开发Express Koa NestJS Fastify CLI Node API尤其适合需要频繁run debug install upgrade switch registry的项目。Monorepo 项目例如packages/ ├── web ├── admin ├── server ├── components ├── utils └── cli每个 Package 都可以独立选择Package Manager Registry Install View Packages Run Script Debug Script前端依赖升级特别适合React 升级 Vue 升级 Vite 升级 TypeScript 升级 Webpack 升级 ESLint 升级 Node 项目升级升级之后快速确认声明版本 VS 实际安装版本 为什么值得装传统前端开发Terminal ↓ npm install package.json ↓ 找 scripts Terminal ↓ npm run dev launch.json ↓ 配置 Debug .npmrc ↓ 修改 Registry node_modules ↓ 手动删除 Explorer ↓ 寻找实际安装版本使用 JS Runner Kit┌─────────────────────────────┐ │ JS Runner Kit │ ├─────────────────────────────┤ │ Package Manager │ │ Registry │ │ Install Dependencies │ │ View Installed Packages │ │ │ │ NPM Scripts │ │ ▶ dev │ │ Debug │ │ ▶ build │ │ ▶ test │ │ │ │ Running Scripts │ │ frontend │ │ backend │ │ │ │ Language Interpreters │ │ Node / Python / Java ... │ └─────────────────────────────┘一个侧边栏覆盖前端项目开发中大量重复操作。 一句话介绍JS Runner Kit —— 专为 VS Code / Cursor 打造的前端与 Node.js 开发工具箱让包管理、NPM 镜像、依赖安装、版本查看、Script 运行和 Debug 都变得更简单。⭐ 核心卖点 多包管理器npm / yarn / pnpm / bun / Custom NPM 镜像管理官方源 / 国内镜像 / 企业私服 / 自定义 Registry 一键安装依赖Install Dependencies node_modules 重装 依赖版本查看Declared Version VS Installed Version 多版本依赖排查快速发现项目中的依赖版本差异与嵌套依赖 一键 DebugNPM Script → JavaScript Debugger → Breakpoint⚡ 多终端并行运行前端 / 后端 / Watch / Docs 同时运行 Script 管理搜索 / 置顶 / Run / Debug 多语言运行JS / TS / Python / Java / Shell / Go / Rust 等 开始使用项目地址GitHub — JS Runner Kit如果你使用VS Code / Cursor进行前端或 Node.js 开发JS Runner Kit 可以作为日常开发中的一个常驻工具。从“运行一个 JS 文件”到“管理整个 Node 项目”让开发流程更加集中、高效。JS Runner KitRun · Manage · Install · Debug一个插件让前端开发少打开几个 Terminal少写几条命令少配几次 Debug。