Catalog Lens ^{VS Code}

Show versions inline for PNPM, Yarn, and Bun catalog: fields.

Features

• ✅ Support for PNPM catalogs (via pnpm-workspace.yaml)
• ✅ Support for Yarn catalogs (via .yarnrc.yml)
• ✅ Support for Bun catalogs (via package.json with catalog or catalogs fields)
• ✅ Multi-root workspace support - Works seamlessly with VS Code multi-root workspaces
• ✅ Inline version display with color-coded named catalogs
• ✅ Hover information with catalog name and version
• ✅ Go-to-definition support to jump to catalog definition
• ✅ Works with both default (catalog:) and named catalogs (catalog:name)

Multi-Root Workspace Support

This extension fully supports VS Code's multi-root workspaces. When you have multiple workspace folders open, the extension will:

• Automatically detect the correct workspace configuration file for each package.json being edited
• Use findUp to traverse from the current file to locate the nearest workspace root
• Support different package managers in different workspace folders (e.g., PNPM in one folder, Bun in another)
• Cache workspace lookups for performance

Bun Catalogs Support

This extension supports Bun's catalog feature as documented at https://bun.sh/docs/install/workspaces#catalogs

Bun catalogs can be defined in your root package.json in two ways:

1. At the top level:

{
  "name": "my-monorepo",
  "catalog": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "catalogs": {
    "testing": {
      "jest": "30.0.0"
    }
  }
}

2. Within the workspaces object:

{
  "name": "my-monorepo",
  "workspaces": {
    "packages": ["packages/*"],
    "catalog": {
      "react": "^19.0.0",
      "react-dom": "^19.0.0"
    },
    "catalogs": {
      "testing": {
        "jest": "30.0.0"
      }
    }
  }
}

Then reference them in workspace packages:

{
  "name": "my-package",
  "dependencies": {
    "react": "catalog:",
    "jest": "catalog:testing"
  }
}

Configs

Development

Prerequisites

This extension uses pnpm for dependency management and vsce (VS Code Extension Manager) for packaging and publishing.

# Install pnpm if you don't have it
npm install -g pnpm

# Install @vscode/vsce for publishing
npm install -g @vscode/vsce

Setup

# Clone the repository
git clone https://github.com/tobiashochguertel/vscode-catalog-lens.git
cd vscode-catalog-lens

# Install dependencies
pnpm install

Testing

The extension includes a test suite using Vitest:

# Run tests
pnpm test

# Run tests in watch mode
pnpm test --watch

Building

# Build the extension
pnpm build

# Type checking
pnpm typecheck

# Linting
pnpm lint

Development Workflow

# Watch mode for development (rebuilds on file changes)
pnpm dev

Then press F5 in VS Code to launch the extension development host.

Publishing

# Package the extension (creates .vsix file)
pnpm package

# Publish to VS Code Marketplace (requires authentication)
pnpm ext:publish

# Or publish to Open VSX
npx ovsx publish

# Create a new release (bumps version and creates git tag)
pnpm release

Note: VS Code extension publishing works with npm, yarn, and pnpm. This project uses pnpm with vsce --no-dependencies flag to avoid bundling dependencies that should be bundled by the build process.

Credits

This extension is a fork of vscode-pnpm-catalog-lens by Anthony Fu, with added support for Bun catalogs.

Logo is modified from Catppuccin Icons (pnpm.svg), licensed under MIT.

License

MIT License © 2022-2024 Anthony Fu & Tobias Hochgürtel