devLap

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

javascript dev.to

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
Enter fullscreen mode Exit fullscreen mode

or for dev dependencies:

npm install 'package-name@latest-version' --save-dev
Enter fullscreen mode Exit fullscreen mode

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?

Marketplace:

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

GitHub Issues:

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

Thanks for reading. I would really appreciate feedback if you try it.

Source: dev.to

arrow_back Back to Tutorials