npmx ^{VS Code}

[!NOTE] 🚧 Preview Version - This extension is under active development. Some features and configurations may change.

Installation

VS Code Marketplace
Open VSX

Run:

code --install-extension npmx-dev.vscode-npmx

Features

Hover Information – Quick links to package details and documentation on npmx.dev, with provenance verification status.
Version Completion – Autocomplete package versions with provenance filtering and prerelease exclusion support.
Workspace-Aware Resolution – Dependencies in package.json, pnpm-workspace.yaml, and .yarnrc.yml are resolved from a shared workspace context, including npm, pnpm, yarn, and bun package managers plus root package.json catalogs and workspace references.
Diagnostics
- Deprecated package warnings with deprecation messages
- Package replacement suggestions (via module-replacements)
- Vulnerability detection powered by the OSV database, with severity levels (critical, high, moderate, low)
- Dist tag warnings when a dependency uses a mutable version tag instead of a pinned version
- Engine mismatch warnings when dependency engine requirements conflict with the current package
- Upgrade hints when a newer version is available
Catalog Resolution – Inline decoration showing the resolved version spec for catalog dependencies in package.json.
Code Actions
- Quick fix actions for diagnostics with ignore list support (workspace or user settings)
Commands
- Open npmx.dev in external browser
- Open node_modules files on npmx.dev code viewer with syntax highlighting (from editor title, editor context menu, explorer context menu, or command palette)

Commands

Command	Title
`npmx.openInBrowser`	npmx: Open npmx.dev in external browser
`npmx.openFileInNpmx`	npmx: Open file on npmx.dev

Configuration

Key	Description	Type	Default
`npmx.catalog.display`	Display style for resolved catalog versions	`string`	`"decoration"`
`npmx.hover.enabled`	Enable hover information for packages	`boolean`	`true`
`npmx.completion.version`	Version completion behavior	`string`	`"provenance-only"`
`npmx.completion.excludePrerelease`	Exclude prerelease versions (alpha, beta, rc, canary, etc.) from completion suggestions	`boolean`	`true`
`npmx.diagnostics.upgrade`	Show hints when a newer version of a package is available	`boolean`	`true`
`npmx.diagnostics.deprecation`	Show warnings for deprecated packages	`boolean`	`true`
`npmx.diagnostics.replacement`	Show suggestions for package replacements	`boolean`	`true`
`npmx.diagnostics.vulnerability`	Show warnings for packages with known vulnerabilities	`boolean`	`true`
`npmx.diagnostics.distTag`	Show warnings when a dependency uses a dist tag	`boolean`	`true`
`npmx.diagnostics.engineMismatch`	Show warnings when dependency engines mismatch with the current package	`boolean`	`true`
`npmx.packageLinks`	Enable clickable links for package version specs	`string`	`"declared"`
`npmx.ignore.upgrade`	Ignore list for upgrade diagnostics ("name" or "name@version"). See Ignore Diagnostics	`array`	`[]`
`npmx.ignore.deprecation`	Ignore list for deprecation diagnostics ("name" or "name@version"). See Ignore Diagnostics	`array`	`[]`
`npmx.ignore.replacement`	Ignore list for replacement diagnostics ("name" only). See Ignore Diagnostics	`array`	`[]`
`npmx.ignore.vulnerability`	Ignore list for vulnerability diagnostics ("name" or "name@version"). See Ignore Diagnostics	`array`	`[]`

Set npmx.catalog.display to "decoration" (default) for resolved catalog versions at the end of the line, or "inlay-hint" to show them next to the catalog reference. Changes take effect without reloading the window. Inlay hints also require editor.inlayHints.enabled to be enabled.

Ignore Diagnostics

npmx supports ignore lists for selected diagnostics.

Matching rules:

npmx.ignore.upgrade, npmx.ignore.deprecation, and npmx.ignore.vulnerability support name and name@version.
npmx.ignore.replacement supports name only.

When a diagnostic supports ignore actions, quick fixes can add entries directly:

Ignore ... (Workspace) updates workspace settings.
Ignore ... (User) updates user settings.

Example

{
  "npmx.ignore.upgrade": ["lodash", "@babel/core@7.0.0"],
  "npmx.ignore.deprecation": ["request"],
  "npmx.ignore.replacement": ["find-up"],
  "npmx.ignore.vulnerability": ["express@4.18.0"]
}

npmx.dev – A fast, modern browser for the npm registry
npmx-replace-extension – Browser extension to redirect npmjs.com to npmx.dev

Contributing

Contributions are welcome! Please review our contribution guide for more details.

npmx

npmx-dev

npmx VS Code