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 |
| — |
… 🔗 needs a, b |
Peer-linked packages that must also be updated |
⚠️ 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.
Packages that pin each other via peer dependencies (e.g. @tiptap/core ↔ @tiptap/pm) don't block each other. Instead you'll see which other packages need updating to matching versions — you stay in control and update each one yourself:
"@tiptap/pm": "3.28.0", ⬆ → 3.32.0 (minor) 🔗 needs @tiptap/core, @tiptap/extension-hard-break
The hints stay — also on packages you've already updated — until every package in the peer group is on a matching version.
An update is only blocked when no compatible version exists for a package in the chain.
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
- Which other packages also require updating
- 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
- Version dropdowns — select any published version per package, including older releases and prereleases. Latest is selected by default; the Latest column always shows the registry's latest release.
- Version warnings — dropdowns and Current/Latest columns flag deprecated releases and known vulnerabilities, including severity. Selecting a flagged release shows warnings without blocking the selection; hover the warning for advisory details.
- Update — install the selected version, including downgrades for up-to-date packages. Peer dependency conflicts are checked against the selected version; only the selected package is updated; peer-linked packages that also need updating are listed ("Also requires updating …") so you can update them yourself.
- Upgrade All — upgrade every eligible (non-blocked) package to latest, regardless of dropdown selections.
Upgrades edit only entries in dependency sections (dependencies, devDependencies, optionalDependencies, peerDependencies) — never scripts — save exact versions without ^, then run npm install in the integrated terminal.
Vulnerability checks send package names and published version lists to your configured registry's npm Bulk Advisory endpoint, cached for 10 minutes. Failed or unsupported checks are labelled vulnerability check unavailable, not treated as safe. Flags cover advisories against the package itself, not its transitive dependencies; use npm audit for the full installed dependency tree.
🚀 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
