npmDepScript

Run npm scripts and review dependency health without leaving VS Code.

npmDepScript puts your package.json scripts and dependency health in one place. Run a script with one click, stop it with another, and see which packages are outdated, deprecated, or vulnerable — current, next, and latest versions included.

Install

1. Open Extensions in VS Code (Ctrl+Shift+X).
2. Search for npmDepScript.
3. Select Install.

Or install from the command line:

code --install-extension RajatMalik.npm-dep-script

Features

• Run scripts from the editor — a clickable play CodeLens above each script line in package.json. It becomes a square stop control while that script is running, and clicking it stops the run.
• Run scripts from the sidebar — a compact Run button next to every script, even when package.json is not open.
• Run scripts from the dashboard — the same controls in an editor tab with the full overview.
• One terminal per script — re-running the same script stops the previous run with Ctrl+C and restarts it in the same terminal. If the command changed, the old terminal is closed and a new one is created.
• Status feedback — Running, Done, Failed, Stopped, or Started in the sidebar and dashboard. Failures also show a popup with a Show terminal action.
• Automatic package manager detection — reads the packageManager field and lock files, with a manual override in settings.
• Live package summary — name, version, scripts, dependencies, and counts.
• Dependencies page — installed Current version, Next version allowed by your range, Latest published version, and Deprecated/Vulnerable badges.
• Deprecated tab — direct dependencies whose installed version is deprecated on npm, grouped into Production and Development.
• Vulnerabilities tab — all installed vulnerabilities from the package manager audit, grouped by severity, with advisory links and fix information.
• Health badges — clicking a Deprecated or vulnerability badge on the Dependencies page opens the relevant tab.
• Automatic refresh — when package.json, a lockfile, or the active selection changes.
• Health refresh — loaded on first open, cached, and refreshed by Refresh or after package.json/lockfile changes.
• Unsaved protection — run buttons are disabled until package.json is saved.
• Workspace trust required — scripts never run in an untrusted workspace.
• Theme aware — light and dark VS Code themes work automatically.
• Safe rendering — package data is inserted as text, never as HTML.
• CSP-protected webviews — scripts are allowed only with a per-load nonce.

There is intentionally no Run all button. The editor stop control is the stop action for an individual run. The sidebar and dashboard have no separate Stop button; their Run button becomes Restart, which stops the previous run and starts it again.

Requirements

• VS Code 1.95 or newer.
• A trusted workspace for running scripts.
• Network access for dependency health: the npm registry and the package manager audit.

The extension targets the Node.js runtime that ships with VS Code 1.95, so it keeps working on newer VS Code versions too.

Getting started

1. Open a project that has a package.json.
2. Click the npmDepScript icon in the activity bar, or run npmDepScript: Open Dashboard from the Command Palette.
3. Use the Scripts tab to run a script, or open package.json and click the play CodeLens above a script.

Screenshots

Dashboard

Sidebar

Commands

Running scripts

In package.json

Each script gets a clickable CodeLens above its line:

• It shows ▶ when idle and ■ while that script is running.
• A normal single click runs the script, or stops it when the symbol is ■.
• There is no “Run” text and no rounded inlay-hint background.
• Hovering shows the script name, terminal command, the command inside package.json, the package manager, the working folder, and the current status.
• CodeLens is above the line, not to the left of the line number. VS Code has no single-click inline button API for the normal text editor.
• This is a CodeLens, so it does not require Ctrl+Click. Ctrl+Click was only required by the old inline inlay-hint implementation.
• Buttons disappear while the file has unsaved changes.

In the sidebar and dashboard

Each script row has a compact Run button:

• While the script is running, it becomes Restart.
• The row shows a small status: Running, Done, Failed, Stopped, or Started.
• Hovering shows the same details as the editor button.
• The sidebar reads the active package.json, or the workspace root/nearest package when no package file is open. A package picker for large monorepos is not implemented yet.

Terminal behavior

• Every script gets a named terminal: npmDepScript: <script name>.
• Re-running the same script from the sidebar/dashboard sends Ctrl+C, then runs it again in that terminal.
• Clicking the editor ■ sends Ctrl+C and marks the script Stopped.
• If the package manager, script command, or working folder changes, the old terminal is closed and a new one is created.
• Status detection uses VS Code shell integration. If the shell does not provide it, the status shows Started, and the editor ■ stop control stays available so the run can still be stopped; exit codes cannot be reported in that case.
• Closing the terminal manually clears the script's status.
• Pressing Ctrl+C in the terminal marks the script as Stopped, not Failed, for exit codes 130 and 143.

Dependency health

Dependencies page

The Dependencies tab shows one row/card per direct dependency:

The dashboard uses a table. The narrow sidebar uses stacked cards with the same labels.

Deprecated tab

• Covers direct dependencies only.
• Checks the installed version’s npm metadata for a deprecation message.
• Groups into Production and Development.
• Shows the installed version, latest version, declared range, deprecation message, and an Open on npm link.

Vulnerabilities tab

• Uses the detected package manager’s audit command and the project lockfile.
• Includes transitive installed packages, not just direct dependencies.
• Groups findings by Critical, High, Moderate, Low, and Info.
• Shows the affected package, installed version, title, affected range, fix information, and an Open advisory link.
• Supports npm, pnpm, Yarn Classic, Yarn Berry, and Bun audit output. If the package manager command is unavailable or the audit fails, the tab shows the error and a Retry button.

Health data is cached. It loads the first time the sidebar/dashboard opens and is refreshed when you click Refresh, or when package.json or a lockfile changes. The registry lookup uses the public npm registry; private registries are not supported yet.

Settings

The default working folder is the workspace root, as configured during setup. For nested packages, switch npmDepScript.workingDirectory to packageFolder.

Development

Requirements

• Node.js ^22.18.0, ^24.11.0, or >=26.0.0 (required by Vite+ 1.4).
• pnpm 11+.

Setup

pnpm install
pnpm build

Open this folder in VS Code and press F5. A second VS Code window (the Extension Development Host) opens with npmDepScript installed. The F5 launch configuration runs the build for you before starting.

Useful commands

Vite+ exposes the underlying tools as vp build, vp pack, vp check, and vp test. The package scripts are thin wrappers around those commands.

Watch mode

• Webview changes: run pnpm watch:webview, then close and reopen the dashboard (or reload the Extension Development Host) to load the new bundle.
• Extension host changes: run pnpm watch:extension, then restart the Extension Development Host (or run Developer: Reload Window).
• Before committing: run pnpm check and pnpm test.

Packaging and publishing

Build the extension bundle first, then create a VSIX:

pnpm build
pnpm vsix

This creates npm-dep-script-1.0.0.vsix. Install it locally with:

code --install-extension ./npm-dep-script-1.0.0.vsix

To publish from the command line, authenticate once with your Marketplace publisher ID and a Personal Access Token, then publish:

pnpm exec vsce login RajatMalik
pnpm publish:marketplace

Alternatively, run pnpm exec vsce publish directly. The manifest vscode:prepublish script builds the extension automatically before it is packaged.

The extension ID is RajatMalik.npm-dep-script; the display name is npmDepScript. VS Code requires the manifest name to be lowercase and unscoped.

Contributing

• Repository: https://github.com/malikrajat/npmDepScript
• Issues: https://github.com/malikrajat/npmDepScript/issues

Please run pnpm check and pnpm test before opening a pull request.

Project layout

src/
  extension.ts              Entry point: activation, commands, file watcher
  core/
    packageSummary.ts       Pure package.json parser (easy to unit test)
    scriptEntries.ts        Finds script keys and line positions in JSON
    scriptRunner.ts         Terminal lifecycle and run state (testable)
    dependencyHealth.ts     Versions, deprecation, and health counts
    audit.ts                npm/pnpm/Yarn/Bun audit output normalization
  host/                     Node-side VS Code integration
    summaryService.ts       Finds package.json, reads it, detects the runner
    dependencyHealthService.ts  Registry, installed versions, and audit adapter
    editorRunButtons.ts     CodeLens ▶/■ actions for package.json scripts
    vscodeRunnerHost.ts     VS Code terminal, dialog, and shell-integration adapter
    webviewHtml.ts          CSP, nonce, and webview asset URIs
    webviewSession.ts       Shared message handling for both surfaces
    sidebarProvider.ts      Activity bar webview
    dashboardPanel.ts       Editor tab webview
  webview/                  Browser-side UI (no VS Code imports)
    main.ts                 Bootstraps the UI and talks to the host
    app.ts                  Top-level render function
    components/             Header, tabs, lists, health, status, footer
    health.ts               UI helpers for versions, badges, and links
    styles.css              Theme-aware CSS
  shared/
    types.ts                Data shared by the host and the webview
    protocol.ts             Typed message guards
    health.ts               Severity order, keys, and empty health state
    dependencyKind.ts       Production/dev labels
    runCommand.ts           Command, tooltip, and runner-detection helpers
tests/
  core/                     Parser, audit, health, command, and runner tests
  host/                     Health-service orchestration tests
  shared/                   Message guard tests
  webview/                  DOM/component tests (jsdom)
media/                      Activity bar icon and Marketplace icon

The extension host and the webview are deliberately separate:

1. The host reads and validates package.json.
2. It loads installed versions, registry metadata, and the package manager audit.
3. It sends a plain data object over VS Code's message channel.
4. The webview renders that object with DOM APIs and textContent.
5. User actions are sent back as small typed messages.
6. Script execution stays entirely in the extension host and uses the VS Code terminal.

This keeps VS Code APIs out of the UI code and makes both sides testable.

What comes next

The script runner and dependency-health views are ready for the next layer:

• Missing and unused dependency detection.
• Private registry and .npmrc support.
• A package selector for monorepos.
• Search and filtering for large dependency/script lists.
• Passing extra arguments to a script.
• Optional Run All and sidebar Stop controls, if you decide you want them later.
• VS Code integration tests with @vscode/test-cli.

License

MIT. See the LICENSE file.