Breaking Borders: Making Your Home Server Accessible from Anywhere in the World

on
0

Real-Time Team Collaboration Using VS Code Live Share & Git

on

⚡ Real-Time Team Collaboration Using VS Code Live Share & Git



A step-by-step guide to collaborating with team members across locations, tracking contributions, and presenting your project timeline.

Introduction

Collaborating on coding projects can be challenging when team members are in different locations. This guide explains how to work together in real-time using VS Code Live Share, mark each member’s contributions, and present your project timeline using Git commit history—perfect for classroom demonstrations or team showcases.

Step 1: Set Up VS Code

Step 2: Install Live Share Extension

  1. Open VS Code.
  2. Go to the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X on Mac).
  3. Search for Live Share and install:
    • Live Share (core extension)
    • Live Share Extension Pack (optional: adds audio, chat, and better collaboration tools)
  4. Reload VS Code after installation.

Step 3: Sign In

Click the Live Share icon or open Command Palette (Ctrl+Shift+P) → type Live Share: Sign In. Sign in using your Microsoft or GitHub account. Each team member must sign in with their own account. No passwords are shared.

Step 4: Start a Live Share Session

  1. Open the project folder in VS Code.
  2. Click Live Share → “Start Collaboration Session”.
  3. Copy the generated session link.
  4. Share the link with your team members to join.

Step 5: Join a Live Share Session

Team members click the session link. Once joined, they can:

  • Edit files in real-time
  • See other members’ cursors
  • Add comments in code
  • Run code if terminal is shared

Step 6: Share Terminal (Optional)

  1. In Live Share tab, click Share Terminal.
  2. Choose Read/Write (allow running commands) or Read-only.
  3. Team members can run code remotely: 
    python main.py

Step 7: Commenting and Marking Contributions

Encourage team members to mark their work with inline comments:

# Author: Alice
# Function: Calculates sum of numbers
def calculate_sum(nums):
    return sum(nums)

Step 8: Initialize Git (if not done)

  1. Open Terminal in VS Code.
  2. Check if Git is initialized: 
    git status
  3. If not: 
    git init
git add .
git commit -m "Initial commit"

Step 9: Commit Work with Author Names

Team members should use descriptive commit messages:

git add .
git commit -m "Alice: Added sum function"
git commit -m "Bob: Added input validation"

Step 10: Display Git Commit History

  1. Run in Terminal: 
    git log --oneline --decorate --graph --all
  2. Install Git Graph extension for a visual commit graph:
    • Extensions → Search "Git Graph" → Install
    • Open Git Graph to see all commits with authors and messages
  3. Optional: Filter commits by author: 
    git log --author="Alice" --oneline
git log --author="Bob" --oneline

Step 11: Demonstrating to Students

  1. Start Live Share session and share your screen/projector.
  2. Show real-time coding process (editing files, running code, seeing contributions).
  3. Show Git commit history alongside to explain who did what and when.
  4. Optionally, record the session with OBS or Zoom for later reference.

Tips for Smooth Collaboration

  • Use clear commit messages for tracking contributions.
  • Combine Live Share (live demo) + Git (history) for full transparency.
  • Use comments in code to mark authorship.
  • Ensure a stable internet connection for real-time collaboration.

Conclusion

By combining VS Code Live Share and Git commit history, your team can:

  • Collaborate effectively across locations.
  • Demonstrate live coding sessions.
  • Clearly show team members’ contributions and project timeline.
  • Present professional, organized workflows in classrooms or remote demonstrations.

Comments

Post a Comment