# Vscode Extension

> VS Code extension development workflow. Use when adding/modifying completion providers, diagnostics, CLI integration, server management, snippets, or building/packaging the extension. Use when this capability is needed.

- Skill: `tomevault-io/vscode-extension` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/vscode-extension`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/vscode-extension/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/vscode-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

```bash
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

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`)

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/7nohe) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->