Open Node Dependency
A VS Code/Cursor extension that enables Cmd+click (or Ctrl+click) navigation on dependency names in package.json files to open the corresponding package.json in node_modules. Useful when debugging version mismatches or writing patches for third-party modules.
Features
- Quick Navigation: Cmd+click (Mac) or Ctrl+click (Windows/Linux) on any dependency name in
package.json to open its package.json file
- Multiple Dependency Types: Works with
dependencies, devDependencies, peerDependencies, and optionalDependencies
- Scoped Packages: Fully supports scoped packages (e.g.,
@scope/package)
- Automatic Detection: Only creates links for packages that exist in
node_modules
Usage
- Open any
package.json file in your workspace
- Hold Cmd (Mac) or Ctrl (Windows/Linux) and click on any dependency name
- The extension will open
node_modules/{package}/package.json in a new editor
Installation
From Source
- Clone this repository
- Run
npm install to install dependencies
- Run
npm run compile to build the extension
- Press F5 in VS Code to open a new Extension Development Host window
- Open a
package.json file and test the cmd+click functionality
Package for Distribution
- Install
vsce: npm install -g @vscode/vsce
- Run
vsce package to create a .vsix file
- Install the
.vsix file via code --install-extension open-node-dependency-0.0.1.vsix
Requirements
- VS Code 1.105.0 or higher
- Node.js project with
node_modules directory
How It Works
The extension registers a DefinitionProvider for package.json files. When you Cmd+hover over a dependency name, it:
- Parses the JSON using
jsonc-parser to build an AST with source positions
- Checks if the cursor is within a dependency key
- Returns a location pointing to
node_modules/{package}/package.json
- Only provides navigation for packages that actually exist in
node_modules
Known Limitations
Partial Underline on Hyphenated Packages
When hovering over packages with hyphens (e.g., jsonc-parser) or scoped packages (e.g., @types/node), VS Code only underlines the word segment under the cursor, not the full package name.
This is a VS Code limitation: the editor uses word boundaries for the hover highlight, and characters like -, /, and @ are treated as word separators. The navigation still works correctly — clicking anywhere within the package name will open the correct file.
Development
# Install dependencies
npm install
# Compile TypeScript
npm run compile
# Watch for changes
npm run watch
License
See LICENSE file for details.
