NPM Run Dev Button for Status Bar

Start your dev server with one click.

A convenient and lightweight status bar button for VS Code inspired by Live Server.
Runs npm run dev in a dedicated terminal and opens the app in your browser as soon as it is up.

Features

• One-click start: renders the npm run dev button on the right side of the status bar whenever the workspace contains a package.json;
• Dedicated terminal: opens a bash terminal with customizable name, icon and color;
• Automatic URL detection: reads the terminal output to find the server URL printed by Vite, Next.js, Create React App and similar tools, works even when the port changes;
• Opens when ready: the browser opens only after the server actually responds, never on a blank "connection refused" page;
• One-click stop: while running, the button turns into a magenta Stop Dev. Clicking it again closes the terminal and stops the server;
• Stays in sync: if the process exits on its own (Ctrl+C, a crash) or you close the terminal, the button returns to its initial state;
• Monorepo friendly: pick a subfolder with workingDirectory, or choose the folder from a list in multi-root workspaces;
• Remote ready: works in WSL, Remote SSH and GitHub Codespaces, because the URL goes through VS Code's port forwarding;
• Any package manager: swap the command for pnpm dev, yarn dev, bun dev or anything else.

How it works

1. The extension creates the custom terminal;
2. It runs the command through VS Code's shell integration and reads the output, looking for a local URL (localhost, 127.0.0.1, 0.0.0.0 or [::1]);
3. It waits until the server accepts connections, then opens the URL in your default browser;
4. If shell integration is not available (or the output has no URL), the extension sends the command as plain text and looks for a port that started listening: the fallback URL (http://localhost:5173 by default) and the usual dev ports.

Requirements

Installation

From the Marketplace

1. Open the Extensions view (Ctrl+Shift+X);
2. Search for NPM Run Dev Button for Status Bar;
3. Click Install.

From a .vsix file

code --install-extension npm-run-dev-button-0.5.2.vsix

Usage

1. Open a project that has a package.json with a dev script;
2. Click npm run dev in the status bar;
3. Wait for your browser to open on the running app;
4. Click Stop Dev when you are done.

You can also open the Command Palette with Ctrl+Shift+P and run NPM Run Dev: Start / Stop server.

Multi-root workspaces: the extension asks which folder the server should run in.

Commands

Extension Settings

Find them under Settings > Extensions > NPM Run Dev Button, or edit settings.json directly.

Example

A pnpm monorepo with the web app in apps/web, a cyan terminal with the name 'Debug App', debug icon and Git Bash on Windows:

{
    "npmDevButton.terminalName": "Debug App",
    "npmDevButton.terminalColor": "terminal.ansiCyan",
    "npmDevButton.terminalIcon": "debug",
    "npmDevButton.command": "pnpm dev",
    "npmDevButton.workingDirectory": "apps/web",
    "npmDevButton.shellPath": "C:\\Program Files\\Git\\bin\\bash.exe"
}

Notes

Windows

Without shellPath, the default terminal profile is used (usually PowerShell). To force Git Bash, point npmDevButton.shellPath to Git's bash.exe. Avoid the WSL bash.exe, which changes the working directory.

Restricted Mode

The extension runs a command from your project, so it is disabled in Restricted Mode and in virtual workspaces. Trust the workspace to use it.

Browser

The extension opens your system default browser, not necessarily Chrome.

Status bar color

VS Code only allows warning and error background colors on status bar items, so the running state is highlighted with magenta text instead of a magenta background.

Troubleshooting

Development

# run in development mode:
# open this folder in VS Code and press F5 (the "Run Extension" configuration)

# build the .vsix
npx @vscode/vsce package

# install it
code --install-extension npm-run-dev-button-0.5.2.vsix

Contributing

Bug reports and ideas are welcome. Please open an issue describing your OS, VS Code version and the command you are running.

License

Released under the MIT License. © 2026 Mateus de Melo Camargo.