NPM Dep Lens 🔍
See npm package updates and peer dependency conflicts at a glance — right inside your package.json.
No more guessing which packages are outdated or whether an upgrade will break something. Just open package.json and it's all right there — color-coded updates, compatibility warnings, and one-click upgrades.
✨ Features
🎨 Color-Coded Inline Decorations
Every dependency in your package.json is annotated with its update status, right next to the version string:
| Color |
Indicator |
Meaning |
| 🟢 Green |
✓ latest |
Already on the latest version |
| 🟢 Light green |
⬆ → x.y.z (patch) |
Patch update available |
| 🔵 Blue |
⬆ → x.y.z (minor) |
Minor update available |
| 🟡 Yellow |
⬆ → x.y.z (major) |
Major update available |
| 🟣 Purple |
⬆ → x.y.z (pre) |
Pre-release update available |
| 🔴 Red |
⚠ → x.y.z ✋ blocked by … |
Update blocked by peer dependency conflict |
⚠️ Peer Dependency Conflict Detection
NPM Dep Lens automatically checks peer dependencies across your entire dependency tree. If upgrading one package would break another, you'll see it immediately:
"vite": "^7.3.2", ⚠ → 8.1.0 ✋ blocked by vite-plugin-sass-glob-import
No surprise npm install failures. No detective work. Just clear, upfront warnings.
Hover over any package name to see a detailed card with:
- Current version vs. latest version
- Update type (major / minor / patch / pre-release)
- Which packages block the update and why
- Whether upgrading the blocker would fix the conflict
- Direct link to the package on npm
📋 CodeLens Section Summaries
A summary line appears above each dependency section (dependencies, devDependencies, optionalDependencies, peerDependencies):
▲ 5 updates available · 1 blocked
Or when everything is current:
✓ All 12 packages up to date
📊 Status Bar
A persistent status bar indicator shows a quick summary at a glance:
NPM: 5↑ 1⚠
Click it to re-run the update check. Turns yellow when blocked updates are detected.
NPM Dep Lens adds a dedicated sidebar in the Activity Bar with a full dashboard:
- Grouped tables — packages organized by section (
dependencies, devDependencies, etc.)
- Version columns — see current version, latest version, and update type at a glance
- Expandable details — click any major or blocked update to see release notes links, changelogs, and blocker info
- One-click upgrades — upgrade individual packages directly from the panel
- Bulk actions:
- Upgrade All — upgrade every eligible (non-blocked) package at once
- Upgrade Patches Only — safely upgrade only patch versions
Upgrades edit your package.json and automatically run npm install in the integrated terminal.
🚀 Getting Started
- Install the extension from the VS Code Marketplace
- Open any project with a
package.json
- See version info appear inline — that's it!
The extension activates automatically when you open a package.json file.
⌨️ Commands
Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type "NPM":
| Command |
Description |
NPM: Check Package Updates |
Manually trigger an update check |
NPM: Refresh Package Updates (Clear Cache) |
Clear the 10-minute cache and re-fetch all packages |
⚙️ Settings
Configure via Settings → Extensions → NPM or in settings.json:
| Setting |
Default |
Description |
depLens.registryUrl |
https://registry.npmjs.org |
NPM registry URL (supports private registries) |
depLens.showUpToDate |
true |
Show green ✓ latest decoration for up-to-date packages |
depLens.checkOnOpen |
true |
Automatically check for updates when opening package.json |
🔧 How It Works
- Parses your
package.json to find all dependency sections
- Fetches the latest version of each package from the npm registry (in parallel, with a 10-minute cache)
- Compares versions using semver to classify update type
- Checks peer dependencies of every installed package to detect upgrade conflicts
- Displays everything inline via editor decorations, hover tooltips, CodeLens summaries, a status bar item, and a sidebar panel
📦 Supported Dependency Sections
dependenciesdevDependenciesoptionalDependenciespeerDependencies
🤝 Contributing
Found a bug or have a feature request? Open an issue on GitHub.
📄 License
MIT
by mortenhoffmanndoff
