NPM Scripts Pro
A sleek and powerful VS Code extension designed to streamline your development workflow by allowing you to run NPM scripts directly from your Explorer panel.
Why NPM Scripts Pro?
When working on modern web or Node.js applications, package.json scripts are the lifeblood of your development process (e.g., npm run build, npm run dev, npm run test).
Instead of constantly opening a terminal and manually typing out these commands, NPM Scripts Pro brings all your scripts directly to your sidebar, allowing you to trigger them instantly with a single click.
Existing Features
🏢 Monorepo & Multi-Folder Support
Whether you have a simple single-folder project or a complex Monorepo (using Lerna, Yarn Workspaces, Nx, etc.), the extension automatically scans your entire workspace for package.json files. If it finds multiple, it cleanly groups your scripts under beautiful, nested directory folders!
⚡ One-Click Execution
Each script is listed under the "NPM Scripts" tab at the bottom of your Explorer panel. You can trigger any script instantly by simply clicking its name or the play icon next to it.
🛠️ Run with Arguments
Need to pass a custom flag to your script? Simply right-click any script and select "Run with Arguments". An input box will prompt you to type in any extra flags (e.g., --watch or --port 3000) before execution.
🌟 New Upgrades
We've recently supercharged the extension with highly requested features and quality-of-life improvements:
🔄 Smart Live Reload
No more manual refreshing! The extension now intelligently watches your package.json files. Whenever you add, modify, or delete a script, the Tree View automatically updates in real-time. We've even optimized the file-watcher to strictly ignore node_modules, keeping your editor lightning fast!
⭐ Favorites System
Do you have dozens of scripts but only use 2 or 3 regularly? You can now Favorite scripts!
- Toggle favorites directly from the inline actions.
- Favorited scripts are visually highlighted with a bright yellow star icon so they stand out in the main list.
- A dedicated "Favorites" folder pins your top scripts right at the top of the view.
📝 Quick Inline Edit
Need to tweak a script quickly? We've added an inline Edit (pencil) button next to scripts. Clicking it won't just open the package.json file—it intelligently jumps to and highlights the exact line where the script is defined!
⚙️ Highly Customizable Settings
You are now in full control of how the extension behaves. Navigate to your VS Code settings to toggle:
- Enable Favorites (
npm-scripts-pro.enableFavorites): Toggle the Favorites folder and inline actions. (Default: false)
- Enable Edit Button (
npm-scripts-pro.enableEditButton): Show or hide the inline Edit (pencil) action. (Default: false)
- Clear Terminal Before Run (
npm-scripts-pro.clearTerminalBeforeRun): Automatically clears the terminal buffer before running a new script to keep logs clean. Shell-agnostic and works perfectly across Bash, PowerShell, and CMD. (Default: true)
- Reuse Terminals (
npm-scripts-pro.reuseTerminals): Keep using the exact same terminal instance instead of creating/destroying them. (Default: false)
- Enable Auto Grouping (
npm-scripts-pro.enableAutoGrouping): Automatically groups scripts sharing a common prefix (before a colon :) into clean, collapsible folders. (Default: false)
- Ignored Scripts (
npm-scripts-pro.ignoredScripts): Filters out scripts from the view based on wildcard glob patterns (e.g., hiding pre* or post* scripts). (Default: [])
- Enable Recent Scripts (
npm-scripts-pro.enableRecentScripts): Tracks the last 5 executed scripts and pins them inside a special "Recent" folder. (Default: false)
- Use Native Tasks (
npm-scripts-pro.useNativeTasks): Run scripts using VS Code's powerful native Task API instead of a basic background terminal, taking full advantage of native Problem Matchers. (Default: false)
Usage
- Open any workspace or folder in VS Code that contains a
package.json file.
- Open the Explorer panel (the default file explorer view on the left).
- Scroll down to find the "NPM Scripts" collapsible section.
- Expand it to see all your available scripts.
- Customize your experience through VS Code Settings (
Ctrl+, -> search for "npm-scripts-pro").
- Click on any script to execute it instantly in a new terminal!
Feedback and Issues
If you find a bug, have a feature request, or want to contribute, please check out the repository and open an issue!
