VS Code Live Share — Real-Time Collaboration Guide

In this tutorial, you'll learn about VS Code Live Share. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

VS Code Live Share transforms your editor into a real-time collaboration platform where multiple developers can edit the same codebase, share terminals, debug together, and forward localhost servers — all without cloning repositories or configuring environments.

What You'll Learn

You'll share your VS Code workspace with teammates for real-time co-editing, collaborate on debugging sessions with shared breakpoints, forward localhost servers so others can preview your work, and integrate Live Share with Teams and Slack for seamless collaboration.

Why Live Share Matters

Traditional pair programming requires shared screens or constant copy-pasting of code snippets. Live Share lets each participant use their own editor preferences, cursor, and focus while working on the exact same files. This eliminates setup friction — guests don't need the project dependencies, language servers, or configuration.

Doda Browser's security team uses Live Share for code reviews of vulnerability patches, allowing a junior developer to write the fix while a senior watches, comments, and takes over debugging without leaving the session.

Learning Path

flowchart LR
  A[VS Code Basics] --> B[Collaboration Tools]
  B --> C[Live Share
You are here]
  C --> D[Remote Development]
  C --> E[Team Workflows]
  style C fill:#f90,color:#fff

Installing Live Share

Install the extension and sign in:

# Install from the Extensions panel:
# Search "Live Share" by Microsoft
# Or install from CLI:
code --install-extension ms-vsliveshare.vsliveshare

Sign in with a GitHub or Microsoft account. Live Share uses your identity for session access control.

Starting a Session

# Start a collaboration session:

# Method 1: Status bar
# Click "Live Share" in the status bar → "Start Collaboration Session"

# Method 2: Command Palette
# Ctrl+Shift+P → "Live Share: Start Collaboration Session"

# Method 3: Keyboard shortcut
# Ctrl+Shift+P → set a custom keybinding for "liveshare.start"

Once started, Live Share copies a session link to your clipboard. Share it with collaborators via chat, email, or Slack.

Session Link Example

https://prod.liveshare.vsengsaas.visualstudio.com/join?ABC123DEF456

Guests open this link in a browser, which launches VS Code (desktop or web) and joins the session.

Co-Editing

// Settings for co-editing (set by host):
{
  "liveshare.features": "all",
  "liveshare.autoShareServers": true,
  "liveshare.autoShareTerminals": true,
  "liveshare.guestApprovalRequired": true,
  "liveshare.focusBehavior": "follow"
}

Each participant sees:

• Cursor — colored cursor with participant name
• Selection — highlighted selection regions
• Edits — changes appear in real-time
• Follow mode — your view follows the host's editor position

Follow Mode

# Guest commands:
# Ctrl+Shift+P → "Live Share: Follow Participant"
# Switch between following the host or independent navigation

# Host commands:
# Ctrl+Shift+P → "Live Share: Focus Participant"
# See what a specific guest is viewing

Shared Terminals

The host can share terminals so guests can run commands:

# Host: right-click terminal tab → "Share Terminal"

# Guest sees the terminal in their VS Code
# Guests can type in the shared terminal:
npm run build
python manage.py migrate
docker compose up -d

# Each guest gets their own cursor in the terminal
# Output is visible to all participants

Shared terminals are useful for debugging together: one person edits code while another runs tests and watches output.

Shared Servers (Port Forwarding)

When you run a local development server, Live Share can forward the port so guests can preview it:

// Automatically share common ports:
{
  "liveshare.autoShareServers": [
    { "port": 3000, "name": "React Dev Server" },
    { "port": 8000, "name": "Django Dev Server" },
    { "port": 8080, "name": "API Server" }
  ]
}

Guests access the forwarded server at a URL like:

https://localhost:3000-abc123.liveshare.vsengsaas.visualstudio.com

The forwarded server runs on the host's machine but is accessible to guests through the Live Share relay.

Collaborative Debugging

Breakpoints set by any participant are shared:

// Host sets a breakpoint in this function:
function processPayment(order) {
    validateOrder(order);  // Breakpoint set by host
    chargeCard(order);     // Breakpoint set by guest
    sendReceipt(order);    // Both see execution pause here
}

// All participants:
// - See the paused state
// - Inspect variables in their own VS Code
// - Step through code independently
// - Evaluate expressions in the debug console

// Guest controls:
// Ctrl+Shift+Y → Debug Console (shared context)
// F10 → Step over (affects all participants)

Session Management

// Session configuration in settings.json:
{
  "liveshare.sessionName": "Security Audit - Payment Module",
  "liveshare.sessionDescription": "Reviewing the new payment processing logic",
  "liveshare.accessLevel": "readWrite",
  "liveshare.anonymousApproval": false,
  "liveshare.notification": "always"
}

Roles and Permissions

Integrating with Teams and Slack

# Live Share extension for Microsoft Teams:
# Add the "VS Code Live Share" tab to a Teams channel
# Start sessions directly from Teams

# Slack integration:
# /liveshare command in Slack (requires bot setup)
# Share session links in Slack channels

Common Live Share Mistakes

1. Not Setting Access Level

Default access allows guests to edit. For code reviews, set "liveshare.accessLevel": "readOnly" to prevent accidental edits.

2. Sharing Sensitive Information

Forwarded servers are accessible to anyone with the session link. Don't share sessions in public channels. Regenerate the session link periodically.

3. Unshared Terminals

The host can see their terminal, but guests can't unless it's explicitly shared. Right-click the terminal tab and select "Share Terminal" for collaborative debugging.

4. Audio/Video Overload

Live Share doesn't include audio. Use a separate call (Teams, Zoom, Discord) alongside Live Share. Typing in the shared terminal is not a substitute for talking.

5. Forgetting to End Sessions

Active sessions consume resources. End the session when done: Ctrl+Shift+P → "Live Share: End Collaboration Session". Inactive sessions time out after 30 minutes.

6. Conflicting Formatting Settings

Host and guest formatters can conflict. Agree on a formatter (Prettier, Black) before the session. The host's formatter takes precedence in shared editing.

7. Not Using Break on Exception

For debugging sessions, enable "Break on All Exceptions" in both participants' debugging configurations. This ensures both catch errors at the same point.

Practice Questions

1. What is the difference between a shared terminal and a regular terminal in Live Share? A regular terminal is only visible to the host. A shared terminal is explicitly shared by right-clicking the terminal tab, making it visible and interactive for all guests.

2. How do you prevent guests from editing code during a code review session? Set "liveshare.accessLevel": "readOnly" in settings.json before starting the session. Guests can view and comment but cannot modify files.

3. What happens to breakpoints set by a guest during a collaborative debugging session? Breakpoints are shared across all participants. Both the host and guest can set, disable, and remove breakpoints. Execution pauses for everyone when a breakpoint is hit.

4. How does port forwarding work in Live Share? The host runs a local server on a port. Live Share creates a relay URL that guests can access in their browser. The request routes through Microsoft's relay service to the host's machine.

5. Challenge: A junior developer cannot reproduce a bug on their machine because of environment differences. Design a Live Share session that lets them debug the issue with a senior developer. Answer: The senior hosts a Live Share session. The junior joins as a co-author. The senior shares the terminal so the junior can run commands. They set breakpoints together in the relevant code. The senior forwards the localhost server so the junior can trigger the bug. They step through the code together, with the junior controlling the debugger and the senior watching from their own view.

FAQ

What's Next

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro. Updated 2026-06-23.