Frontend Project Scripts Assistant

View and run frontend project scripts directly inside VS Code.

This extension automatically scans package.json files in your current workspace and organizes runnable scripts in the sidebar. Instead of repeatedly switching folders, opening terminals, and typing commands by hand, you can launch common scripts with a single click.

When It Helps

• You work in a workspace that contains multiple frontend projects
• You often run scripts like dev, build, test, or lint
• You want to quickly confirm whether a project uses npm, pnpm, yarn, or bun
• You want to handle common actions such as installing dependencies, opening terminals, locating folders, and running scripts without leaving VS Code

Key Features

• Automatically scans all package.json files that contain scripts
• Shows a dedicated Project Scripts view in the Explorer sidebar
• Automatically detects common package managers: npm, pnpm, yarn, and bun
• Adds an Install Dependencies entry for each project
• Runs scripts in a terminal opened at the correct project directory
• Supports quick script selection from the Command Palette
• Supports locating the project folder, opening it in the system file manager, and opening a terminal for it
• Automatically refreshes when package.json changes

Installation

If the extension has been published to the VS Code Marketplace, search for Frontend Project Scripts Assistant in the Extensions view and install it directly.

If you received a .vsix file instead, install it like this:

1. Open VS Code.
2. Go to the Extensions view.
3. Click the ... menu in the top-right corner.
4. Choose Install from VSIX....
5. Select the extension package and complete the installation.

After installation, reopen your frontend project or workspace and the extension will be ready to use.

Quick Start

1. Open your frontend project, or a workspace that contains multiple frontend projects, in VS Code.
2. Find the Project Scripts view in the Explorer sidebar.
3. Expand a project and you will see:
   • Install Dependencies
   • The scripts defined in that project's package.json
4. Click any script and the extension will run it in a terminal opened at that project's directory.

For example, clicking dev runs:

<package-manager> run "dev"

Common Actions

1. Install Dependencies

Click Install Dependencies under a project and the extension will run the correct install command based on the detected package manager.

Examples:

• npm install
• pnpm install
• yarn install
• bun install

2. Run a Script

Click a script name to run it, for example:

• dev
• build
• test
• lint

The extension opens the terminal in the correct project directory before executing the command.

3. Pick and Run a Script

If you prefer using the Command Palette:

1. Press Ctrl+Shift+P.
2. Run Pick and Run Project Script.
3. Choose the script you want to execute from the list.

4. Refresh the Script List

After adding, editing, or removing scripts in package.json, you can refresh the list by using:

• The refresh button at the top of the view
• Refresh Project Scripts from the Command Palette

The extension usually refreshes automatically, but manual refresh is useful when you want to confirm changes immediately.

5. Project Shortcuts

You can also use these actions directly on a project row:

• Reveal Folder: Locate and highlight the project directory inside the VS Code Explorer
• Open Folder: Open the project directory in the system file manager
• Open Terminal: Open a terminal directly in that project directory

Package Manager Detection

The extension detects the package manager in the following order:

1. The packageManager field in package.json
2. pnpm-lock.yaml
3. yarn.lock
4. bun.lockb or bun.lock
5. Falls back to npm if none of the above is found

Scripts are executed in the following format:

<package-manager> run "<script-name>"

Notes

• Only projects that contain scripts are shown
• Common directories such as node_modules, dist, build, and .git are ignored automatically
• Multiple frontend projects can be recognized in the same workspace
• Terminals are separated by project, which makes it easier to run several scripts in parallel

FAQ

Why don't I see any scripts?

Check the following:

• Whether you opened the correct project folder or workspace
• Whether the project contains a package.json
• Whether package.json contains a scripts section
• Whether the Project Scripts view is visible in the Explorer sidebar

Why is it using the wrong package manager?

The extension first checks the packageManager field in package.json.
If you want to force a specific package manager, declaring it there is the most reliable option.

I updated scripts, but the list did not refresh immediately

Try clicking Refresh Project Scripts first. If it still does not update, reopen the current workspace.

Summary

If you often run frontend scripts inside VS Code, this extension turns "find project, switch directory, open terminal, type command" into a single click.

前端项目脚本助手

在 VS Code 里集中查看并运行前端项目脚本。

它会自动扫描当前工作区中的 package.json，把可运行的 scripts 整理到侧边栏。你不需要反复切目录、开终端、手敲命令，点一下就能运行常用脚本。

适合什么场景

• 一个工作区里有多个前端项目，来回切换不方便
• 经常要运行 dev、build、test、lint 这类脚本
• 想快速确认某个项目用的是 npm、pnpm、yarn 还是 bun
• 希望在 VS Code 里直接完成“安装依赖、开终端、定位目录、运行脚本”这些常用操作

主要功能

• 自动扫描工作区下包含 scripts 的 package.json
• 在资源管理器侧边栏显示“项目脚本”视图
• 自动识别常见包管理器：npm、pnpm、yarn、bun
• 每个项目自动提供“安装依赖”入口
• 点击脚本即可在对应项目目录打开终端并执行
• 支持从命令面板快速选择并运行脚本
• 支持一键定位项目目录、打开项目目录、打开对应终端
• 当 package.json 变化时自动刷新列表

安装方式

如果这个扩展已经发布到扩展市场，直接在 VS Code 扩展页搜索 前端项目脚本助手 安装即可。

如果你拿到的是 .vsix 安装包，可以这样安装：

1. 打开 VS Code。
2. 进入“扩展”视图。
3. 点击右上角 ...。
4. 选择“从 VSIX 安装...”。
5. 选择扩展安装包并完成安装。

安装完成后，重新打开你的前端项目工作区即可使用。

快速上手

1. 用 VS Code 打开你的前端项目，或包含多个前端项目的工作区。
2. 在资源管理器侧边栏找到 项目脚本 视图。
3. 展开某个项目后，你会看到：
   • 安装依赖
   • 该项目 package.json 中定义的脚本列表
4. 点击任意脚本，扩展会在该项目目录的终端中自动执行。

例如点击 dev，实际执行的是：

<包管理器> run "dev"

常用操作

1. 安装依赖

在项目下点击 安装依赖，扩展会自动按当前项目对应的包管理器执行安装命令。

例如：

• npm install
• pnpm install
• yarn install
• bun install

2. 运行项目脚本

点击脚本名称即可运行，例如：

• dev
• build
• test
• lint

扩展会自动在该项目目录下打开终端并执行，不会跑到别的目录。

3. 选择并运行脚本

如果你更习惯用命令面板：

1. 按 Ctrl+Shift+P 打开命令面板。
2. 输入并选择 选择并运行项目脚本。
3. 从列表中选中你要执行的脚本。

4. 刷新脚本列表

当你新增、修改或删除了 package.json 里的脚本后，可以使用：

• 视图顶部的刷新按钮
• 命令面板中的 刷新项目脚本

通常扩展也会自动刷新，但手动刷新可以更快确认结果。

5. 项目快捷操作

在项目行上还可以直接使用这些操作：

• 定位目录：在 VS Code 资源管理器中定位并选中该项目目录
• 打开目录：用系统文件管理器打开该项目目录
• 打开终端：直接在该项目目录打开终端

包管理器识别规则

扩展会按下面的顺序识别项目使用的包管理器：

1. package.json 中的 packageManager
2. pnpm-lock.yaml
3. yarn.lock
4. bun.lockb 或 bun.lock
5. 如果都没找到，默认使用 npm

脚本运行命令统一为：

<包管理器> run "<脚本名>"

使用说明

• 只会显示包含 scripts 的项目
• node_modules、dist、build、.git 等目录会自动忽略
• 一个工作区中可以同时识别多个项目
• 终端会按项目分别打开，方便你并行运行多个脚本

常见问题

为什么没有显示任何脚本？

可以依次检查这几项：

• 当前打开的是不是正确的项目目录或工作区
• 项目里是否存在 package.json
• package.json 里是否包含 scripts
• 资源管理器侧边栏里是否已经展开 项目脚本 视图

为什么运行的不是我想要的包管理器？

扩展会优先读取 package.json 里的 packageManager 字段。
如果你希望固定使用某个包管理器，建议优先在 package.json 中显式声明。

修改了 scripts 以后没有马上更新怎么办？

先点击一次 刷新项目脚本。如果仍未更新，尝试重新打开当前工作区。

一句话总结

如果你经常在 VS Code 里来回执行前端脚本，这个扩展可以把“找项目、切目录、开终端、敲命令”压缩成一次点击。