ArchStep

Syntax highlighting, inline diagnostics, and a live animated preview for .step files — the same compiler and renderer as the ArchStep web app, running inside VS Code.

Features

• Syntax highlighting for .step files.
• Inline errors — a compile error underlines the exact line, sourced from the same compiler the web app uses.
• Live preview — run "ArchStep: Show Preview" (or the preview icon in the editor toolbar) to open a side panel with the actual animated Player, updating as you type.

Development

npm run build      # bundle extension host + webview with esbuild
npm run watch       # same, rebuilding on change
npm test            # typecheck + unit tests for the pure diagnostics logic

Then open the repo root (not this folder alone — it's an npm workspace member and has no lockfile of its own) in VS Code and press F5. That runs the root .vscode/launch.json config, which builds this package and launches an Extension Development Host with it loaded.

Manual install (.vsix)

For a permanent install in your everyday VS Code — not just the temporary Extension Development Host window F5 opens — package it and install the .vsix directly:

npm run package -w packages/vscode-extension   # builds + runs vsce, outputs archstep-vscode-0.0.1.vsix
code --install-extension packages/vscode-extension/archstep-vscode-0.0.1.vsix

No Marketplace publish needed — code --install-extension accepts a local file path directly. Restart VS Code (or reload the window: Cmd/Ctrl+Shift+P → "Developer: Reload Window") if it doesn't pick it up immediately. To install without the CLI: open VS Code's Extensions panel → ... menu (top-right) → "Install from VSIX..." → pick the file.

To update after a rebuild, reinstall over it — code --install-extension on a newer .vsix replaces the old one. Uninstall with code --uninstall-extension archstep.archstep-vscode (publisher archstep, name archstep-vscode — the two package.json fields joined with a dot).

Troubleshooting: preview doesn't show

Syntax highlighting working but no preview panel usually means the preview command was never triggered — it's manual, not automatic on opening a .step file. Check in order:

1. Did you actually invoke it? Click the preview icon (top-right of the editor tab toolbar) or Cmd/Ctrl+Shift+P → "ArchStep: Show Preview". If neither the icon nor the command exists, the extension isn't contributing them — go to step 2.
2. Is the extension active, not just installed? Extensions panel (Cmd/Ctrl+Shift+X) → confirm ArchStep shows enabled. If you reinstalled/updated the .vsix, reload the window: Cmd/Ctrl+Shift+P → "Developer: Reload Window" — a stale load can leave the old version half-loaded.
3. Check for a silent error. Cmd/Ctrl+Shift+P → "Developer: Toggle Developer Tools" → Console tab, then retry the preview command and watch for errors. Also check Cmd/Ctrl+Shift+P → "Output" → dropdown → "Log (Extension Host)" for activation failures.