ToolBox Development — VS Code Extension

Learn how to set up your development environment and contribute to the Power Platform ToolBox VS Code Extension.

Overview

The VS Code Extension is built with:

TypeScript - Extension host and webview UI
React - Webview UI components
Webpack - Build tooling
VS Code Extension API - Tree views, webview panels, commands, status bar

Repository: github.com/PowerPlatformToolBox/vscode-extension. Published at the VS Code Marketplace.

Prerequisites

Node.js 20 or higher - Download
npm 10 or higher
VS Code 1.85.0 or higher

Getting Started

1. Fork and Clone

git clone https://github.com/PowerPlatformToolBox/vscode-extension.git
cd vscode-extension

2. Install Dependencies

npm install

3. Configure Environment

Copy the environment template and fill in your values:

cp .env.example .env

Variable	Description
`PPTB_SUPABASE_URL`	URL for the PPTB Supabase backend
`PPTB_SUPABASE_ANON_KEY`	Anonymous key for the PPTB Supabase backend

Reach out to the maintainers if you need access to the Supabase backend.

4. Launch the Extension Development Host

code .

Press F5 to launch an Extension Development Host with the extension loaded.

Project Structure

src/                      # Extension host source (TypeScript)
  extension.ts            # Entry point
  managers/               # Business logic managers
  panels/                 # Webview panel wrappers
  providers/               # Tree data providers
  registrations/          # Command registrations
  statusbar/              # Status bar items
  utils/                  # Shared utilities
  polyfill/               # toolboxAPI polyfill injected into tool webviews
webviews/                 # Webview UI source (React/TypeScript)
  connection/             # Connection management webview
  toolHost/               # Tool host webview
  toolTool/               # Tool configuration webview
resources/                # Static assets (icons)
dist/                     # Compiled output (generated)

Building

# Development build (incremental)
npm run compile

# Watch mode (rebuilds on save)
npm run watch

# Production build
npm run package

# Run ESLint
npm run lint

# Format with Prettier
npm run format

Pull Request Guidelines

Create a feature branch from main, using conventional commit prefixes (feat:, fix:, chore:, docs:).
Ensure npm run lint and npm run package pass before opening a PR.
Open a PR against main with a clear title and description.

Releasing

Releases are automated via GitHub Actions:

Update the version field in package.json.
Commit the version bump and push to main.
Create and push a matching tag: git tag v0.2.0 && git push origin v0.2.0.

The release workflow builds, packages, and publishes the extension to the VS Code Marketplace automatically.

Architecture Guide Contributing Guide