iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Live Share

Live Share is VS Code’s real-time collaboration extension: share your workspace, terminal, debugger, ports, and editor cursors with anyone who has VS Code. It’s pair programming without context-switching to a screen-share — tighter feedback, faster reviews, lower bandwidth.

Install, share, security, patterns

EXAMPLE
// 1) Install
// VS Code → Extensions → search 'Live Share' → install official Microsoft extension
// (Pack also includes Live Share Audio for built-in voice)
//
// Code editor must be:
//   • VS Code  (Windows/Mac/Linux/web)
//   • VS Code Insiders
//   • Visual Studio (limited)
//
// First use: sign in with GitHub or Microsoft account

// 2) Start a session
// • Command Palette → 'Live Share: Start Collaboration Session'
// • Or click the 'Live Share' button in the status bar
// • Link copied to clipboard automatically
// • Share the link via Slack / Teams / email
//
// Optional: 'Live Share: Start Read-Only Session' — guests can only view

// 3) Join a session
// • Open the URL in browser → opens VS Code
// • Or: 'Live Share: Join Collaboration Session' → paste URL
// • Or: Live Share panel → 'Join Session'
//
// Guest sees:
//   • The host's workspace files (read-only or edit, based on host setting)
//   • Host's terminals (if shared)
//   • Forwarded ports (e.g. localhost:3000)
//   • Debug sessions (can step alongside)

// 4) What gets shared
// Files:        Yes — guest sees the workspace tree
// Editor:       Yes — cursors, selections, edits in real time
// Terminals:    Optional — host explicitly shares
// Servers:      Optional — host shares specific localhost ports
// Debug:        Optional — both can step, set breakpoints
// Voice/chat:   Built-in audio + comments
//
// What is NOT shared:
//   • Host's settings.json
//   • Host's installed extensions
//   • Host's Git credentials
//   • Files outside the workspace

// 5) Sharing a terminal — host
// • Live Share panel → 'Share Terminal'
// • Choose 'read-only' or 'read/write'
// • Guest sees the terminal in their VS Code
// • All keystrokes go to the host's machine (or shared if read/write)
//
// CAREFUL: a guest with write access to your terminal can run ANY command.

// 6) Forwarding ports
// Host runs npm run dev on localhost:3000
// • Live Share panel → 'Share Server' → enter 3000
// • Guest opens http://localhost:3000 → traffic tunnelled through Live Share
//
// Useful for:
//   • Demoing a local-only feature
//   • Letting the guest test your dev server
//   • Sharing a Storybook / preview without deploying

// 7) Multi-cursor + follow mode
// • Click guest avatar in the editor → 'Follow' to track their cursor / open file
// • Edit anywhere; conflicts resolved like Google Docs (operational transform)
// • Press Ctrl+Alt+J / Cmd+Shift+J to focus the session participants list

// 8) Audio + chat
// • Live Share Audio extension adds built-in voice — no Zoom needed
// • Comments: 'Comments' panel works on shared files
// • For richer chat, pair with Slack / Discord

// 9) Pair programming patterns
// • Driver / Navigator — host drives, guest reviews + suggests; rotate every 25 min
// • Mob programming — 3+ devs; one keyboard, others suggest; rotate frequently
// • Code review walkthrough — author drives; reviewer follows + asks questions
// • Debugging sessions — share repro steps; both step through the bug
// • Onboarding — new dev follows a senior through codebase tour
// • Live interviews — candidate solves problems with shared workspace

// 10) Security checklist
// • Live Share guests get access to YOUR workspace files (when not read-only)
// • Don't share workspaces with secrets/.env unless you trust the guest
// • Use 'Stop Collaboration Session' when done; don't leave running
// • Audit shared terminals — write access = full shell access
// • For external collaborators, use READ-ONLY sessions by default
// • Anonymous guests: disable in settings ('liveshare.guestApprovalRequired')
//
// Workspace settings:
{
    "liveshare.guestApprovalRequired":  true,        // approve each guest
    "liveshare.allowGuestDebugControl": false,       // forbid guests from controlling debugger
    "liveshare.allowGuestTaskControl":  false,       // forbid running tasks
    "liveshare.featureSet":              "stable",
    "liveshare.notebooks.allowGuestExecuteCells": false
}

// 11) Settings — host vs guest
// Host:                            // dictates session capabilities
//   • Read-only by default
//   • Approve each join request
//   • Disable terminal / debugger access for guests
// Guest:                            // limited control
//   • Can ask to share their terminal back (rare)
//   • Use 'Focus' mode to stop following someone

// 12) Workspace setup that helps Live Share
// • Commit .vscode/settings.json + recommended extensions for consistent formatting
// • Pre-install dev container (so the guest doesn't have to)
// • Document 'first run' steps so the guest doesn't ask 'where do I click'

// 13) Alternatives to Live Share
// • Screen share (Zoom, Slack, Teams) — simple, lossy, one driver only
// • Tmate (terminal-only) — share a shell session via SSH
// • CodeWith Me (JetBrains) — IDE equivalent for IntelliJ family
// • GitPod / Codespaces — shared cloud dev environments; persistent state
// • Gather / Tuple — pair-programming-focused; less code-editor integration

// 14) Real-world tips
// • Live Share works best when both have similar specs (latency matters)
// • Network issues → session disconnects; reconnect, lose nothing
// • Use audio (built-in or Zoom) for tone + back-channel
// • Keep sessions to 60-90 min — fatigue hits fast
// • Take screenshots / notes during the session; you'll forget by tomorrow
// • For long-distance teams, schedule with calendar holds

// 15) Common bugs
// • Guest can't see a file — host accidentally added it to .gitignore or .vscode/settings excludes it
// • Forwarded port not reachable — host's localhost binding doesn't include 0.0.0.0 (set in dev server)
// • Audio choppy — disable browser tabs that hog CPU; use VS Code desktop
// • Edits lag during big paste — let it settle; conflicts resolve eventually
// • Sign-in fails — try GitHub instead of Microsoft account
// • Firewall blocking — Live Share uses outbound TCP 443; corporate proxies may block
// • Guest crashes don't affect host — but unsaved guest changes can vanish on reconnect
// • Settings.json local-only — guests don't get host's keybindings or theme
// • Treating it like screen share — Live Share allows EDITS; pair-programmer needs to communicate clearly

Why it matters

Live Share replaces screen-shares with real collaborative coding: editors, terminals, ports, debugger. Default to read-only sessions for external collaborators, disable terminal write access by default, end sessions explicitly when done, and pair with built-in audio or your usual voice tool for low-friction pair programming.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// Real-time collaborative editing + shared terminal + shared debugger.
// Invite via a link, host stays in control.
Try it Yourself »

Discussion

Loading…