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
| 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()
New Snippet
- Add to
snippets/figram.json
- Update docs (
docs/en/vscode-extension.md, docs/ja/vscode-extension.md)
By