A Visual Studio Code extension that provides a visual interface for managing NPM dependencies, inspired by the NuGet Package Manager in Visual Studio.
| Category | Capabilities |
|---|---|
| Dependency Management | Visual table with sorting, filtering by type (prod/dev/peer), auto-refresh on package.json changes |
| Search & Install | NPM registry search with debouncing, install as regular or dev dependency |
| Updates | One-click individual or bulk updates, version rollbacks, ignore packages from checks |
| Security & Info | Security audit integration, deprecation warnings, package sizes, direct links to changelogs, "why is it installed?" reverse dependency view |
| Multi-Project | Auto-detection in monorepos, project selector showing each package.json path, supports npm, yarn, pnpm, and bun |
| Localization | 8 languages: Spanish, German, French, Chinese (Simplified), Japanese, Portuguese, Russian, Korean |
| UI | Native VS Code theme integration, customizable columns, activity bar badge with pending updates/vulnerabilities |
- VS Code 1.85.0 or higher
- Node.js project with a
package.jsonfile - Package manager installed (npm, yarn, pnpm, or bun)
Install from the VS Code Marketplace or search for "NPM Visual Manager" in the Extensions panel (Ctrl+Shift+X).
Also available on Open VSX Registry for VSCodium and other compatible editors.
- Command Palette: Press
Ctrl+Shift+P(orCmd+Shift+Pon Mac) and type "Open NPM Package Manager" - Context Menu: Right-click on
package.jsonin the Explorer and select "Open NPM Package Manager"
- View Dependencies: The table shows all packages with their installed and latest versions
- Check for Updates: The extension automatically checks npm registry for latest versions
- Update Packages:
- Click "Update" on individual packages
- Use "Update All" button to update all outdated packages at once
Repos often hold more than one package.json (a monorepo, a WordPress theme plus its plugins, a site with its own build folder). The header always shows the target file as a path chip next to the project selector; click it to open that file. The editor tab title, every confirmation dialog and every progress notification name the same path, so an update can never land on a file you did not expect. When several projects are detected, the selector switches between them and the "Updates" view lists the pending updates per package.json. Projects are discovered up to five folder levels deep; if one of yours is missing, raise npm-visual-manager.scan.maxDepth.
- Search: Type in the filter box to search by package name
- Type Filter: Use the dropdown to show only Production, Development, or Peer dependencies
Expand the "INSTALL PACKAGES" section, type a package name (min. 2 characters), and click on a result to install it. You can choose to install as a regular dependency or dev dependency.
Smart Detection: When searching for a package that is already installed in your project, the button will change to "Uninstall" with a confirmation dialog.
Click the eye icon 👁️ next to any package to ignore it from update checks. Ignored packages won't appear in the "updates available" counter. Click "Show All Packages" to toggle between viewing only outdated packages or all packages.
Hover over any package row and click the book icon 📖 to open the package's GitHub releases page. This helps you review what changed before updating.
This extension contributes the following settings:
npm-visual-manager.columns.size: Show Size columnnpm-visual-manager.columns.type: Show Type columnnpm-visual-manager.columns.lastUpdate: Show Last Update columnnpm-visual-manager.columns.security: Show Security columnnpm-visual-manager.columns.semverUpdate: Show Update Type columnnpm-visual-manager.badge.enabled: Show a badge on the activity bar icon with the number of available updates and vulnerable packagesnpm-visual-manager.scan.maxDepth: How many folder levels below the workspace root are searched forpackage.jsonfiles (default5)npm-visual-manager.scan.excludeFolders: Folder names never searched (defaults tonode_modules,bower_components,vendor,uploads,dist,out,coverage,tmp,temp; dotted folders are always skipped)
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see LICENSE file for details.
- Inspired by Visual Studio's NuGet Package Manager
- Uses VS Code Webview UI Toolkit design principles
- Built with React and Vite