VS Code - Package Manager Detector

Installation · Usage · Settings · CHANGELOG

ℹ️️ Description

This Visual Studio Code extension automatically detects and displays which package manager (npm, yarn, pnpm, or bun) is used in your project. It shows the detected package manager in the status bar with color-coded indicators and provides quick access to package.json.

The extension intelligently detects package managers by analyzing:

• Lock files (package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb)
• The packageManager field in package.json
• Priority-based detection when multiple lock files exist

👨🏻‍🏫 How to Use

The first thing you need to do is installing the extension.

The extension automatically detects your package manager when you open a workspace and displays it in the status bar with color-coded text (all lowercase):

• npm - Red (#CB3837)
• yarn - Blue (#2C8EBB)
• pnpm - Orange (#F9AD00)
• bun - Beige (#FBF0DF)

Hover over the status bar item to see:

• Package manager name and version (from packageManager field)
• Total dependency count
• Available npm scripts with their commands
• Click to open package.json

Detection Priority

The extension follows this detection priority:

1. Lock Files (highest priority)

   • bun.lockb → bun
   • pnpm-lock.yaml → pnpm
   • yarn.lock → yarn
   • package-lock.json → npm

2. packageManager Field (fallback)

   • Parses the packageManager field in package.json
   • Examples: "packageManager": "pnpm@8.6.0" → pnpm

⚙️ Settings

The extension allows you to customize the following configuration settings:

Customize Colors

You can customize the colors in your VS Code settings:

{
  "workbench.colorCustomizations": {
    "packageManagerDetector.npm": "#CC0000",
    "packageManagerDetector.yarn": "#0066CC",
    "packageManagerDetector.pnpm": "#FF9900",
    "packageManagerDetector.bun": "#FFF5E1"
  }
}

💁🏻 Contributing

This is an open source project. Any contribution would be greatly appreciated!