前端脚本运行器 | Frontend Scripts Runner

在 VS Code 侧边栏直接运行 npm、pnpm、yarn 和 bun scripts。

在 VS Code 侧边栏集中查看和运行前端项目中的 package.json scripts，减少在终端里反复查找和输入命令的时间。

功能特性

• 侧边栏运行 scripts：点击任意脚本即可使用自动识别的包管理器运行。
• 按前缀分组：相同前缀的脚本会自动分组，例如 build:dev 和 build:prod 会归到 build 组。
• 支持多根工作区：使用多根工作区时，每个包含 package.json 的项目都会单独显示。
• 自动识别包管理器：支持 npm、pnpm、yarn 和 bun。
• 显示运行状态：运行中、运行成功和运行失败的脚本会显示不同图标。
• 复制完整命令：右键脚本即可复制完整命令，例如 pnpm run build:dev。
• 减少长时间命令误报：短时间内失败的命令会弹出错误提示；像 dev server 这样的长时间运行命令超过设定时长后退出，不会触发该提示。

使用要求

• VS Code 1.85.0 或更高版本
• 工作区中至少有一个包含 scripts 字段的 package.json
• 对应的包管理器已安装，并且可以在系统 PATH 中使用

安装扩展

发布到 VS Code Marketplace 后，普通用户不需要下载源码、打包或安装 .vsix 文件：

1. 打开 VS Code 的扩展面板。
2. 搜索 前端脚本运行器 或 Frontend Scripts Runner。
3. 点击安装。

快速开始

1. 使用 VS Code 打开包含 package.json 的前端项目。
2. 点击活动栏中的 前端脚本 火箭图标。
3. 展开项目和脚本分组。
4. 点击脚本即可运行。

命令输出会显示在 VS Code 的任务终端中。修改 package.json 后，可以点击视图标题栏中的刷新按钮重新加载脚本。

包管理器识别规则

扩展会按照以下顺序识别当前项目使用的包管理器：

1. 优先读取 package.json 中的 packageManager 字段，例如 pnpm@10.5.0。

2. 检查工作区中的锁文件：

   锁文件	包管理器
   pnpm-lock.yaml	pnpm
   bun.lockb 或 bun.lock	bun
   yarn.lock	yarn
   package-lock.json	npm

3. 如果仍然无法识别，则使用 frontend-scripts-runner.defaultPackageManager 设置项。

设置项

打开 VS Code 设置，搜索 Frontend Scripts Runner。

使用示例

假设项目中的 package.json 如下：

{
  "scripts": {
    "dev": "vite",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "lint": "eslint ."
  }
}

侧边栏会显示为：

build
  build:dev
  build:prod
其他
  dev
  lint

如果项目使用 pnpm，点击 build:dev 时实际执行：

pnpm run build:dev

常见问题

项目没有显示

请确认项目文件夹已经在 VS Code 中打开，并且包含有效的 package.json 文件。该文件的 scripts 字段中至少需要有一个脚本。

命令无法启动

请确认对应的包管理器已经安装，并且可以在 VS Code 集成终端中运行。也可以手动设置 frontend-scripts-runner.defaultPackageManager。

包管理器识别错误

可以在 package.json 中设置 packageManager 字段，删除不再使用的旧锁文件，或者配置 frontend-scripts-runner.defaultPackageManager 作为兜底值。

参与贡献

欢迎提交问题和功能建议。反馈问题时，请尽量提供 VS Code 版本、操作系统、包管理器以及最小复现步骤。

许可证

本项目采用 MIT 许可证。