https://github.com/nitayneeman/vscode-package-manager-detector
🔎 A Visual Studio Code extension which detects and displays which package manager (npm, yarn, pnpm or bun) is used in your project
https://github.com/nitayneeman/vscode-package-manager-detector
bun npm package-manager pnpm visual-studio-code vscode yarn
Last synced: 2 months ago
JSON representation
🔎 A Visual Studio Code extension which detects and displays which package manager (npm, yarn, pnpm or bun) is used in your project
- Host: GitHub
- URL: https://github.com/nitayneeman/vscode-package-manager-detector
- Owner: nitayneeman
- License: mit
- Created: 2025-11-06T11:02:31.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-11-15T07:54:53.000Z (2 months ago)
- Last Synced: 2025-11-15T09:23:14.102Z (2 months ago)
- Topics: bun, npm, package-manager, pnpm, visual-studio-code, vscode, yarn
- Language: TypeScript
- Homepage:
- Size: 2.21 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://marketplace.visualstudio.com/items?itemName=nitayneeman.package-manager-detector).
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:
| Name | Description | Default |
| ----------------------------- | -------------------------------- | --------- |
| `packageManagerDetector.npm` | Color for npm in the status bar | `#CB3837` |
| `packageManagerDetector.yarn` | Color for yarn in the status bar | `#2C8EBB` |
| `packageManagerDetector.pnpm` | Color for pnpm in the status bar | `#F9AD00` |
| `packageManagerDetector.bun` | Color for bun in the status bar | `#FBF0DF` |
### Customize Colors
You can customize the colors in your VS Code settings:
```json
{
"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!