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.tswithvscode.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)
You Might Also Like
Related Skills
coding-agent
Run Codex CLI, Claude Code, OpenCode, or Pi Coding Agent via background process for programmatic control.
openclaw
add-uint-support
Add unsigned integer (uint) type support to PyTorch operators by updating AT_DISPATCH macros. Use when adding support for uint16, uint32, uint64 types to operators, kernels, or when user mentions enabling unsigned types, barebones unsigned types, or uint support.
pytorchat-dispatch-v2
Convert PyTorch AT_DISPATCH macros to AT_DISPATCH_V2 format in ATen C++ code. Use when porting AT_DISPATCH_ALL_TYPES_AND*, AT_DISPATCH_FLOATING_TYPES*, or other dispatch macros to the new v2 API. For ATen kernel files, CUDA kernels, and native operator implementations.
pytorchskill-writer
Guide users through creating Agent Skills for Claude Code. Use when the user wants to create, write, author, or design a new Skill, or needs help with SKILL.md files, frontmatter, or skill structure.
pytorch
implementing-jsc-classes-cpp
Implements JavaScript classes in C++ using JavaScriptCore. Use when creating new JS classes with C++ bindings, prototypes, or constructors.
oven-shimplementing-jsc-classes-zig
Creates JavaScript classes using Bun's Zig bindings generator (.classes.ts). Use when implementing new JS APIs in Zig with JSC integration.
oven-sh