Skip to content

feat: Add VSCode extension for live coding in Python#777

Open
TaliesinYang wants to merge 3 commits into
donkirkby:masterfrom
TaliesinYang:feat/vscode-extension
Open

feat: Add VSCode extension for live coding in Python#777
TaliesinYang wants to merge 3 commits into
donkirkby:masterfrom
TaliesinYang:feat/vscode-extension

Conversation

@TaliesinYang

Copy link
Copy Markdown

Summary

  • Adds a new VSCode extension that brings live coding support to VS Code, addressing the long-standing request in VSCode support #218
  • Includes a fix for Python 3.14 compatibility (tk.PhotoImage mock in mock_turtle.py)
  • Bundled space_tracer — works out of the box without pip install

Features

Feature Status
Split view (source left, trace right)
Auto text/canvas detection
Turtle graphics (Webview Canvas)
Matplotlib charts
Scroll sync (PyCharm-style leader/follower)
File switching auto re-trace
Custom turtle icon in editor title bar
Keyboard shortcuts (Cmd+Shift+L / K)
CodeLens quick start
Status bar with mode indicator
Error display (red status bar)
Stop closes output panel
Auto-save other documents before trace
Configurable: Python path, debounce, canvas size, driver, traced module, stdin, ms limit
E2E tests (@vscode/test-electron)

Architecture

Follows the same pattern as the Sublime and Emacs plugins:

  1. Launch space_tracer as a subprocess via stdin/stdout
  2. Parse output (text trace + canvas commands)
  3. Display in split editor (Virtual Document) + Webview (canvas)

Key files:

  • vscode/src/extension.ts — session management, commands, scroll sync
  • vscode/src/tracerManager.ts — subprocess lifecycle, debounce, Python detection
  • vscode/src/canvasPanel.ts — Webview Canvas rendering (turtle/matplotlib)
  • vscode/src/canvasParser.ts — canvas command parser (ported from html/src/SampleAnalyst.js)

Test plan

  • npm run compile — zero errors
  • npm test — E2E tests pass (extension activation, split view, trace output, file switching)
  • Manual test: basic Python trace
  • Manual test: turtle graphics (blue square, star, flag)
  • Manual test: matplotlib chart
  • Manual test: syntax error display
  • Manual test: scroll synchronization
  • Manual test: file switching auto re-trace
  • Manual test: stop restores single panel
  • Tested on code-server + VSCode Remote SSH

Screenshots

Tested via code-server with Playwright automation.

Closes #218

🤖 Generated with Claude Code

alex and others added 3 commits March 23, 2026 15:08
Python 3.14's turtle.py references tk.PhotoImage in TurtleScreen.__init__,
which fails when tkinter is not available (e.g., headless environments).
Adding PhotoImage to the mock objects allows space_tracer to work on
any Python version without requiring tkinter.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add a new VSCode extension that brings live coding support to VS Code,
matching the PyCharm plugin's core features:

- Split view: source code on left, trace output on right
- Auto-detection: automatically switches between text and canvas mode
- Turtle graphics: renders turtle drawings in a Webview panel
- Matplotlib: displays plots via canvas commands
- Scroll sync: PyCharm-style leader-follower synchronization
- File following: auto re-traces when switching Python files
- Custom turtle icon in editor title bar
- Keyboard shortcuts: Cmd+Shift+L (start), Cmd+Shift+K (stop)
- CodeLens: clickable "Start Live Coding" link at file top
- Configurable: Python path, debounce, canvas size, driver, traced module
- Bundled space_tracer: works out of the box, no pip install needed
- E2E tests with @vscode/test-electron

Closes donkirkby#218

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- contributing-vscode.md: development setup, architecture, testing, packaging
- docs/starting_vscode.md: user guide with examples for trace, turtle, matplotlib
- CONTRIBUTING.md: add VS Code entry to development environments list

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@donkirkby

Copy link
Copy Markdown
Owner

This is a great start! I see you got both modes working.

Are you interested in continuing, or shall I take it from here?

Next steps:

  • Tie the live coding mode to a single file. It shouldn't start running a file without the user starting live mode for that file. I wouldn't want them to accidentally run something destructive.
  • Separate code visualization from canvas mode. Sometimes you want to see variable values for visual code.
  • Fix the GitHub actions. It may not be related to your changes, but the build broke.
  • Extract common code from browser and VSCode versions.
  • Figure out how to publish in the marketplace.

Let me know if any of those interest you, otherwise I'll merge your changes and create new issues for myself.

Thanks again for coming to the sprint!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

VSCode support

2 participants