A fully-featured npm dependency manager built right into VS Code. Browse, audit, update, and install packages without ever leaving your editor.
- Overview
- Features
- Getting Started
- The Sidebar
- The Dashboard
- Browse & Install Packages
- Revert History
- Security & Vulnerability Detection
- Keyboard Shortcuts & Quick Access
- Configuration
- Requirements
- Contributing
- License
PackSight replaces the tedious cycle of switching between your terminal, browser, and editor to manage npm packages. Everything — from checking for outdated dependencies to browsing and installing new ones — happens inside a single, purpose-built interface in VS Code.
It works automatically when you open any project that contains a package.json. No setup required.
- Package list grouped into Dependencies and Dev Dependencies
- Status icons at a glance: ✅ healthy,
⚠️ unused, 🔵 outdated, 🔴 outdated + unused - Inline action buttons (Update, Copy, Uninstall) that appear on row hover
- Collapsible groups with package counts and unused badges
- Rotating tips that surface hidden features and keyboard shortcuts
- Quick links to the GitHub repo: star, docs, issues, changelog, contribute
- Toggle button to switch between the sidebar list and the full dashboard
- Stats bar showing total packages, dev deps, unused count, outdated count, and security status
- Sortable table with columns for name, version, latest, last update, size, and status
- Status badges — Major / Minor / Patch update classification with colour coding
- Bulk update — select multiple packages and update them all at once
- Search & filter — search by name, filter by All / Unused / Outdated / Dev tabs
- UI scale control —
−/100%/+buttons in the header, orCtrl + scroll - Node.js & npm version badges showing your current runtime versions
- Changelog button — opens the package's GitHub releases page directly
- Package name link — click any package name to open it on npmjs.com
- ↩ Revert History — a persistent panel listing every update and uninstall with one-click undo
- Vulnerability detection via
npm audit— runs automatically on every load - Shield icon next to every package name: green ✓ for clean, coloured ⚠ for vulnerabilities
- Severity levels: 🔴 Critical, 🟠 High, 🟡 Moderate, 🟢 Low
- Security stat card in the dashboard showing total vulnerability count
- AST-based import scanning — parses every
.js,.ts,.jsx,.tsxfile in your project - Detects
import,import type(excluded),require(), and side-effect imports - Results are cached by file modification time — re-scans only when files actually change
- Search any npm package by name directly from the sidebar panel
- Results show name, version, and description
- Install as a regular or dev dependency with a single click
- Already-installed packages are marked with a ✓ badge
- Stale-while-revalidate caching — the dashboard renders instantly from cache on re-open, then refreshes in the background
- Batched registry calls — fetches version, publish date, size, and repository URL in a single
npm viewcall per package instead of four - In-flight deduplication — if the sidebar and dashboard both load at the same time, they share one set of registry requests
- Audit result caching —
npm auditonly re-runs whenpackage.jsonactually changes - Optimistic UI updates — after install/update/uninstall, the UI reflects the change instantly without waiting for a full refresh
- Install PackSight from the VS Code Marketplace
- Open any folder that contains a
package.json - Click the PackSight icon in the Activity Bar (left sidebar)
That's it. PackSight activates automatically whenever a package.json is detected in your workspace.
The sidebar is always visible in the PackSight panel. It gives you a compact, real-time view of your project's dependencies without leaving your current file.
| Icon | Meaning |
|---|---|
| 🟢 Circle (green) | Healthy — up to date and used |
| 🟡 Warning (yellow) | Unused — not imported in any source file |
| 🔵 Arrow up (blue) | Outdated — a newer version is available |
| 🔴 Circle-slash (red) | Outdated and unused |
Hover over any package row to reveal three action buttons:
| Button | Action |
|---|---|
| ↑ Arrow | Update to latest version (with confirmation) |
| Copy | Copy the package name to clipboard |
| Trash | Uninstall the package (with confirmation) |
After an update or uninstall from the sidebar, a VS Code notification appears with an Undo button. Click it within the notification timeout to revert the action.
Click the ↺ refresh icon in the Packages section header to manually re-scan and re-fetch registry data.
Open the dashboard by clicking Open Package Manager in the sidebar toggle button, or via any of the quick access methods.
Five cards at the top give you an instant project health summary:
| Card | Shows |
|---|---|
| Total Deps | Total number of dependencies |
| Dev Deps | Number of devDependencies |
| Unused | Packages not imported anywhere |
| Outdated | Packages with newer versions available |
| Security | Vulnerability count (or ✓ if clean) |
The main table lists every package with full details. Click any column header to sort.
| Column | Description |
|---|---|
| Name | Package name — click to open on npmjs.com |
| Version | Currently installed version |
| Latest | Latest available version (green if update exists) |
| Last Update | When the installed version was published |
| Size | Unpacked size from the npm registry |
| Status | OK / Unused / Major / Minor / Patch Update badge |
| Actions | Update and Uninstall buttons |
- Search bar — filters the table in real time by package name
- Tabs — All / Unused / Outdated / Dev
- Check the boxes next to packages you want to update (only shown when updates are available)
- Click ↑ Update Selected in the bulk action bar
- Confirm in the modal — it shows each package's current → latest version with bump type
Adjust the dashboard zoom level using:
- The − / 100% / + control in the header
- Ctrl + scroll wheel anywhere on the dashboard
Your preferred scale is saved and restored automatically.
PackSight keeps a persistent history of every update and uninstall you perform in the dashboard, so you can undo any action at any time.
- Click the ↩ History button in the dashboard header to open the Revert History panel
- A red badge on the button shows how many revertable actions are available
- Each entry shows the package name, what was done (Uninstalled / Updated), the version to restore, and a timestamp
- Click ↩ Revert on any entry to undo that specific action
- History is persisted across panel close and reopen — switching to Tree View and back does not clear it
- Click Clear History at the bottom of the panel to wipe all entries
| Action | Revert behaviour |
|---|---|
| Uninstall | Re-installs the exact version that was removed (npm install pkg@x.y.z) |
| Update | Downgrades back to the version before the update (npm install pkg@x.y.z) |
History is stored in memory for the current VS Code session. It is cleared when VS Code is closed or the extension is reloaded.
- Click Browse & Install Packages in the sidebar toggle area (or the button in the dashboard header)
- Type a package name in the search box — results appear as you type (400ms debounce)
- Each result shows the package name, version, and description
- Click + Install to add as a regular dependency, or + Dev to add as a devDependency
- Hover an install button to see the exact
npm installcommand that will run - Click a package name to open it on npmjs.com
PackSight runs npm audit automatically when you open the dashboard. Results are cached and only re-run when package.json changes, so there's no performance penalty on repeated opens.
- Every package row shows a shield icon immediately after the package name
- Green shield with ✓ — no known vulnerabilities
- Coloured shield with ! — vulnerability detected at the shown severity
| Colour | Severity | Description |
|---|---|---|
| 🔴 Red | Critical | Immediate action required |
| 🟠 Orange | High | Should be addressed soon |
| 🟡 Amber | Moderate | Review and plan to fix |
| 🟢 Lime | Low | Low risk, fix when convenient |
Note: Vulnerability detection requires a
package-lock.jsonin your project. Runnpm installfirst if you don't have one.
| Method | Action |
|---|---|
Ctrl+Shift+P → PackSight: Open Package Manager |
Open the dashboard from the Command Palette |
Right-click package.json → Open Package Manager |
Open the dashboard from the Explorer |
| Click the PackSight icon in the Activity Bar | Open the sidebar panel |
Ctrl + scroll on the dashboard |
Zoom in / out |
PackSight adds two settings under PackSight in VS Code's settings (Ctrl+,).
Extra flags appended to npm install <pkg>@latest when updating a package.
| Value | Effect |
|---|---|
--legacy-peer-deps (default) |
Bypasses peer-dependency conflicts |
| (empty string) | Strict resolution — fails on peer conflicts |
Extra flags appended to npm uninstall when removing a package.
| Value | Effect |
|---|---|
--legacy-peer-deps (default) |
Bypasses peer-dependency conflicts |
| (empty string) | Strict resolution |
Example — set in settings.json:
{
"packSight.updateFlags": "",
"packSight.uninstallFlags": "--legacy-peer-deps"
}| Requirement | Version |
|---|---|
| VS Code | 1.85.0 or later |
| Node.js | 18.0.0 or later |
| npm | Any version that ships with Node 18+ |
PackSight uses npm CLI commands internally (npm view, npm audit, npm install, npm uninstall). Make sure npm is available in your system PATH.
Contributions are welcome! Please read CONTRIBUTING.md for development setup, commit conventions, and pull request guidelines.
MIT © Maruf Billah