I built a VS Code extension for inspecting npm dependencies and would love feedback

Noritaka Kobayashi — Sat, 20 Jun 2026 09:47:50 +0000

I built a VS Code extension called npm-dependency-manager.

It helps inspect npm dependencies directly inside VS Code.

Marketplace:

https://marketplace.visualstudio.com/items?itemName=noritaka1166.npm-dependency-manager

GitHub:

https://github.com/noritaka1166/vscode-npm-dependency-manager

What it is

npm-dependency-manager is a VS Code extension for inspecting dependencies from package.json.

It finds package.json files in your workspace, lets you select one, and shows its dependencies and devDependencies in the sidebar and dashboard.

It also uses npm registry metadata and package-lock.json data to show more context about the packages installed in your project.

Why I built it

When working with npm projects, I often jump between:

package.json
package-lock.json
npmjs.com
GitHub README / releases
terminal commands like npm outdated and npm audit

That works, but once a project has many dependencies, it becomes annoying to answer simple questions like:

What version am I actually using?
When was the installed version published?
What is the latest version?
Is this package deprecated?
Does it have known vulnerability signals?
What license does it use?
Is this a direct dependency or a transitive dependency?
Can I quickly see its README or npm metadata?

So I wanted a way to inspect dependency status without leaving VS Code.

Built with Codex

I built this extension together with OpenAI Codex.

The first version was small:

find package.json files in the workspace
list dependencies and devDependencies
fetch the latest version from the npm registry
show a package detail page with README content

Then I kept using it and iterating on what felt missing.

Over time, I added:

package-lock.json integration
npm audit advisory signals
transitive dependency browsing
README rendering improvements
npm metadata and weekly downloads
license display and filtering
update actions
Marketplace README / GIF / CHANGELOG preparation
English and Japanese README files

Codex helped with implementation, UI iteration, Marketplace packaging, README rendering fixes, and a lot of the small edge cases.

I still made the product decisions myself: what information I wanted to see, which UI felt too noisy, what should be prioritized, and what was worth shipping.

The workflow of “build a small version, try it, notice what feels wrong, improve it” was very fast with Codex.

Features

Current features include:

Find package.json files in the current workspace
Prefer the workspace root package.json by default
Show dependencies and devDependencies
Search package names and descriptions
Filter by dependency type
Filter by update status
Filter by vulnerability / deprecated / unknown audit state
Show package licenses in the dependency list
Filter by detected license
Compare requested, resolved, and latest versions
Show publish dates for current / resolved and latest versions
Highlight major / minor / patch update candidates
Read resolved versions from package-lock.json
Browse transitive dependencies
Show npm audit advisory signals when resolved versions are available
Show deprecated package messages
Show npm metadata and weekly downloads
Render package README content
Fall back to GitHub README files when npm registry README content is missing or not useful
Open README external links through the VS Code API
Run guarded update actions from the list or detail page

License visibility

One feature I added recently is license display.

In many projects, version and security information are not the only things that matter. It can also be useful to quickly check package licenses, especially in work projects or public products.

The extension shows license values directly in the dependency list.

It can also filter by detected license, so you can quickly check things like:

packages using MIT
packages using Apache-2.0
packages with missing license metadata shown as Unknown

package-lock.json integration

package.json does not always tell you the exact version installed in the project.

So when a package-lock.json exists next to the selected package.json, the extension uses it to show resolved versions and dependency tree context.

This is especially useful for vulnerability signals, because audit results are much more accurate when a resolved version is available.

Vulnerability signals

The extension uses npm audit bulk advisory data to show known advisory signals.

It can show direct vulnerability signals, and it also tries to surface transitive vulnerabilities when they appear through the lockfile dependency tree.

This is not meant to replace npm audit or CI security checks.

The goal is to make potential issues easier to notice while browsing dependencies inside VS Code.

README rendering

The package detail page renders README content from npm registry metadata.

Some packages do not publish useful README content to the npm registry, or only expose a README path. For those cases, the extension tries to fall back to GitHub README files when possible.

External links from README content are opened through the VS Code API.

Update actions

For outdated direct dependencies, the extension can generate an update command.

It does not silently edit your files.

Instead, it shows a confirmation prompt and lets you either:

run the command in a VS Code terminal
copy the generated command

For example:

npm install 'package-name@latest-version' --save

or for dev dependencies:

npm install 'package-name@latest-version' --save-dev

What I want feedback on

This is still early, and I would love feedback from people who work with npm projects regularly.

I am especially interested in:

Is this useful as a VS Code sidebar workflow?
Is the dependency list too noisy?
Are the update / vulnerability / deprecated / license indicators easy to understand?
Is license filtering useful in real projects?
Is the package detail page showing the right information?
Are transitive dependencies easy to understand?
Are update actions useful, or should they stay copy-only?
What information would make this worth keeping installed?
Any UI / UX issues?