VS Code extension development workflow. Use when adding/modifying completion providers, diagnostics, CLI integration, server management, snippets, or building/packaging the extension.
SKILL.md
VS Code Extension Development
Architecture
Directory
Purpose
src/extension.ts
Entry point, command registration
src/completion/
Autocomplete for provider: and kind:
src/diagnostics/
YAML validation, error highlighting
src/ops/
CLI detection, server management
snippets/figram.json
YAML snippets
Build
cd 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
ID
Title
figram.init
Init diagram.yaml
figram.build
Build JSON
figram.serve.start
Start Serve
figram.serve.stop
Stop Serve
figram.serve.restart
Restart Serve
figram.serve.quickPick
Serve Actions
figram.refreshDiagnostics
Refresh Diagnostics
Configuration
Setting
Default
Description
figram.cli.command
null
Custom CLI command
figram.serve.host
127.0.0.1
Server host
figram.serve.port
3456
Server port
figram.serve.allowRemote
false
Allow remote
figram.serve.secret
""
Auth secret
figram.diagnostics.enabled
true
Enable diagnostics
figram.diagnostics.debounceMs
300
Debounce delay
Adding Features
New Command
Add to package.json → contributes.commands
Register in extension.ts with vscode.commands.registerCommand()
Add to context.subscriptions
New Configuration
Add to package.json → contributes.configuration.properties
Read with vscode.workspace.getConfiguration("figram.xxx")
New Completion Provider
Create class implementing vscode.CompletionItemProvider
Register with vscode.languages.registerCompletionItemProvider()