VS Code Extension Development

Name: vscode-extension
Rating: 76
Author: 7nohe

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

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