---

name: vscode-extension description: VS Code extension development workflow. Use when adding/modifying completion providers, diagnostics, CLI integration, server management, snippets, or building/packaging the extension.

VS Code Extension Development

Architecture

Build

Copycd packages/vscode
bun run build:dev    # Development with sourcemaps
bun run dev          # Watch mode
bun run build        # Production
bun run package      # Create .vsix

Debug: F5 in VS Code → Extension Development Host

Commands

Configuration

Adding Features

New Command

1. Add to package.json → contributes.commands
2. Register in extension.ts with vscode.commands.registerCommand()
3. Add to context.subscriptions

New Configuration

1. Add to package.json → contributes.configuration.properties
2. Read with vscode.workspace.getConfiguration("figram.xxx")

New Completion Provider

1. Create class implementing vscode.CompletionItemProvider
2. Register with vscode.languages.registerCompletionItemProvider()

New Snippet

1. Add to snippets/figram.json
2. Update docs (docs/en/vscode-extension.md, docs/ja/vscode-extension.md)