Part 3: Tools and Remote Setup

Part of the Pair Programming 101 Series

March 2020: Everything Changed

Before pandemic: Pair programming meant sitting next to someone, sharing a keyboard.

March 2020: Everyone went remote. Overnight.

First week of remote work: Tried screen sharing over Zoom. Laggy. Frustrating. Couldn't type on partner's machine.

Someone suggested: "Try VS Code Live Share."

Changed everything. Remote pairing became better than in-person.

Let me show you the tools I actually use.

VS Code Live Share (My Primary Tool)

Best collaborative coding tool I've ever used. Real-time collaboration. No lag. Each person uses their own editor setup.

Initial Setup

Install VS Code Live Share:

1. Open VS Code

2. Go to Extensions (Cmd+Shift+X)

3. Search "Live Share"

4. Install "Live Share" by Microsoft

5. Sign in with GitHub or Microsoft account

That's it. Ready to pair program.

Starting a Session

Host's workflow:

# 1. Open your project in VS Code
cd your-project

# 2. Click "Live Share" in status bar
# OR use Command Palette (Cmd+Shift+P):
# > Live Share: Start Collaboration Session

# 3. Share the link with your pair
# Link looks like:
# https://prod.liveshare.vsengsaas.visualstudio.com/join?ABC123

Guest joins:

• Click the link

• VS Code opens automatically

• Join as read-write participant

Takes 30 seconds total.

Real Pairing Session Example

Last week, pairing with Sarah on auth service:

// src/middleware/auth.ts

// Both of us editing this file simultaneously
// Sarah working on line 10, me working on line 30
// We see each other's cursors in real-time

import { Request, Response, NextFunction } from 'express';
import { verifyToken } from '@/utils/jwt';

// Sarah adding this function
export async function authenticate(
  req: Request, 
  res: Response, 
  next: NextFunction
) {
  try {
    const authHeader = req.headers.authorization;
    
    if (!authHeader) {
      return res.status(401).json({ error: 'No token provided' });
    }
    
    // Sarah: "Extracting bearer token..."
    const token = authHeader.replace('Bearer ', '');
    
    // Sarah: "Verifying..."
    const payload = await verifyToken(token);
    
    // Attach user to request
    req.user = payload;
    next();
  } catch (error) {
    res.status(401).json({ error: 'Invalid token' });
  }
}

// Meanwhile, I'm writing the tests below
// src/middleware/auth.spec.ts

import { authenticate } from './auth';
import { Request, Response } from 'express';

describe('authenticate middleware', () => {
  it('should reject requests without auth header', async () => {
    const req = { headers: {} } as Request;
    const res = {
      status: jest.fn().mockReturnThis(),
      json: jest.fn()
    } as unknown as Response;
    const next = jest.fn();
    
    await authenticate(req, res, next);
    
    expect(res.status).toHaveBeenCalledWith(401);
    expect(next).not.toHaveBeenCalled();
  });
});

Sarah sees my cursor in the test file. I see her cursor in the middleware.

We're working in parallel on related code. Completely seamless.

Live Share Advanced Features

Shared terminal:

# Host shares terminal
# Guest can see AND type in the same terminal

# We run tests together:
npm test

# Both see output in real-time
# Either of us can type commands

Shared servers:

// I start the server
npm run dev

// Server runs on my machine: localhost:3000
// Sarah automatically gets access via Live Share port forwarding
// She can access localhost:3000 in her browser
// Sees the same app I'm seeing

Shared debugging:

// I set a breakpoint
// Sarah hits the endpoint
// We BOTH see the debugger pause
// Both can inspect variables
// Either can step through code

// Example debugging session:
async function processOrder(orderId: string) {
  const order = await getOrder(orderId); // Breakpoint here
  
  // Both of us inspecting 'order' object
  // Sarah: "The userId is null, that's the bug"
  // Me: "You're right, the query is wrong"
}

Game changer for remote debugging.

My VS Code Live Share Settings

Settings I use for smooth pairing:

// .vscode/settings.json
{
  "liveshare.audio.enabled": true,
  "liveshare.focusBehavior": "followActive",
  "liveshare.presence": true,
  "liveshare.showInStatusBar": "whileCollaborating",
  
  // Auto-format on save (keeps code consistent)
  "editor.formatOnSave": true,
  
  // Show who's editing what
  "liveshare.nameTagVisibility": "Always",
  
  // Share port 3000 automatically
  "liveshare.autoShareServers": true
}

Communication Tools

Code collaboration is half the battle. Communication is the other half.

My Communication Stack

1. Discord (Primary voice/video)

Why Discord over Zoom:

• Better audio quality

• Lower latency

• Screen sharing works perfectly

• Separate channels for different topics

• Always-on voice channels

My setup:

Server: Development Team
├── 📢 general-chat
├── 🔊 Pairing Room 1 (voice)
├── 🔊 Pairing Room 2 (voice)
├── 🔊 Mob Programming (voice)
└── 📌 code-snippets

Drop into voice channel. Start pairing immediately.

2. Slack (Async communication)

Use Slack for:

• Scheduling pairing sessions

• Sharing links and resources

• Quick questions

• Code snippets not in Live Share

My workflow:

Sarah: "Want to pair on the payment integration at 2pm?"
Me: "Perfect. I'll start a Live Share session"
Sarah: "👍"

[At 2pm]
Me: *shares Live Share link in Slack*
Sarah: *clicks, joins instantly*

3. Built-in VS Code Audio (Yes, it exists!)

VS Code Live Share has built-in audio. I rarely use it though.

Enable it:

{
  "liveshare.audio.enabled": true
}

Why I don't use it:

• Discord has better quality

• Can't switch between speakers/headphones easily

• No push-to-talk

But it works if you can't use Discord.

Communication Best Practices

My rules for effective remote pairing:

1. Always use voice, never just text

❌ Bad:

Typing in chat: "change line 45 to use async/await"

✅ Good:

Speaking: "Hey, let's refactor this to use async/await for better readability"

Voice is 10x faster and clearer.

2. Describe what you're doing

// Good commentary while driving:

// "I'm adding the user validation here..."
export function validateUser(user: User) {
  // "First checking if email is valid..."
  if (!isValidEmail(user.email)) {
    throw new Error('Invalid email');
  }
  
  // "Now checking password requirements..."
  if (user.password.length < 8) {
    throw new Error('Password too short');
  }
}

Keeps navigator engaged. Easier to spot mistakes.

3. Use video for complex discussions

Screen sharing + video for:

• Architecture discussions

• Debugging visual issues

• Explaining complex concepts

Screen sharing only for:

• Routine feature development

• Code refactoring

Video drains energy. Use strategically.

Git Workflow for Pair Programming

Git gets tricky with two people. Here's my workflow.

Traditional Approach (What I Started With)

Both developers commit:

# Host (me) commits
git add .
git commit -m "Add user validation"

# Guest (Sarah) needs credit
# We use co-authored-by
git commit --amend

# Edit commit message:
Add user validation

Co-authored-by: Sarah Johnson <[email protected]>

Works, but tedious. Easy to forget co-author.

Git Mob (What I Use Now)

Better tool for pair commits.

Install:

npm install -g git-mob

Setup:

# Create .git-coauthors file
git mob --init

# Add your pairing partners
cat > ~/.git-coauthors << EOF
{
  "coauthors": {
    "sj": {
      "name": "Sarah Johnson",
      "email": "[email protected]"
    },
    "jd": {
      "name": "Jake Davis",
      "email": "[email protected]"
    },
    "mt": {
      "name": "Maria Torres",
      "email": "[email protected]"
    }
  }
}
EOF

Usage:

# Start pairing with Sarah
git mob sj

# Make changes
git add .
git commit -m "Implement user authentication"

# Automatically adds:
# Co-authored-by: Sarah Johnson <[email protected]>

# Stop pairing
git mob --delete

Automatic co-author attribution. Never forget.

Pair Programming Branch Strategy

My team's workflow:

# Day 1: Start feature with Sarah
git checkout -b feature/user-auth
git mob sj

# Work together
git add .
git commit -m "Add JWT token generation"

# Push branch
git push origin feature/user-auth

# Day 2: Continue alone
git mob --delete
git commit -m "Add token refresh logic"

# Day 3: Pair with Jake
git mob jd
git commit -m "Add rate limiting to auth endpoints"

# Done - open PR

Branch clearly shows who worked on what. Commit history reflects actual collaboration.

Handling Merge Conflicts While Pairing

Real example from last week:

// feature/user-auth branch
// Both Sarah and I edited this file

// My version:
export async function login(email: string, password: string) {
  const user = await findUser(email);
  const valid = await comparePassword(password, user.password);
  
  if (!valid) {
    throw new Error('Invalid credentials');
  }
  
  return generateToken(user);
}

// Main branch changed meanwhile (another team member)
export async function login(credentials: LoginCredentials) {
  const user = await authenticateUser(credentials);
  return createSession(user);
}

// Merge conflict!

Resolution process:

1. Share screen immediately

2. Both look at the conflict together

3. Discuss which approach is better

4. Navigator decides, driver implements

5. Test the merged version

// Resolution we agreed on:
export async function login(credentials: LoginCredentials) {
  const user = await findUser(credentials.email);
  const valid = await comparePassword(
    credentials.password, 
    user.password
  );
  
  if (!valid) {
    throw new Error('Invalid credentials');
  }
  
  const token = await generateToken(user);
  return createSession(user, token);
}

Two brains make merge conflicts less scary.

Remote Pairing Environment Setup

My ideal remote pairing setup:

Hardware

Essential:

• Microphone (not laptop mic)

• Headphones (prevents echo)

• Stable internet (minimum 10 Mbps)

Nice to have:

• Second monitor

• Webcam

• Mechanical keyboard (if you like the sound)

Software Configuration

VS Code settings for remote pairing:

{
  // Prettier for consistent formatting
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  
  // ESLint auto-fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  
  // Same tab size for everyone
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  
  // Show whitespace
  "editor.renderWhitespace": "all",
  
  // Auto-save (so partner sees changes)
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  
  // Live Share specific
  "liveshare.autoShareServers": true,
  "liveshare.focusBehavior": "followActive",
  "liveshare.presence": true
}

Project Configuration

Shared config files:

// .vscode/settings.json (committed to repo)
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.tsdk": "node_modules/typescript/lib"
}

// .vscode/extensions.json (recommended extensions)
{
  "recommendations": [
    "ms-vsliveshare.vsliveshare",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "firsttris.vscode-jest-runner"
  ]
}

Everyone has the same setup. No formatting wars.

My Complete Remote Pairing Workflow

From start to finish:

// 1. Schedule session in Slack
// "Sarah: Want to pair on user auth at 2pm?"
// "Me: Yes! I'll send the Live Share link"

// 2. At 2pm, start VS Code Live Share
// Click status bar "Live Share" button
// Copy link, send to Sarah in Slack

// 3. Sarah joins, we start Discord voice chat
// Join "Pairing Room 1" voice channel

// 4. Setup git mob
// git mob sj

// 5. Decide who drives first
// "I'll drive first, you navigate?"

// 6. Code together for 25 minutes

// src/services/auth.service.ts
import { hash, compare } from 'bcrypt';
import { sign } from 'jsonwebtoken';

export class AuthService {
  async login(email: string, password: string) {
    // Navigator (Sarah): "Validate inputs first"
    if (!email || !password) {
      throw new Error('Email and password required');
    }
    
    // Driver (me) typing...
    const user = await this.userRepository.findByEmail(email);
    
    if (!user) {
      throw new Error('Invalid credentials');
    }
    
    // Navigator: "Use constant-time comparison"
    const valid = await compare(password, user.passwordHash);
    
    if (!valid) {
      throw new Error('Invalid credentials');
    }
    
    // Generate token
    const token = sign(
      { userId: user.id, email: user.email },
      process.env.JWT_SECRET!,
      { expiresIn: '24h' }
    );
    
    return { token, user };
  }
}

// 7. Switch roles after 25 minutes
// "Sarah, you drive now"

// 8. Commit when done
git add .
git commit -m "Implement user login with JWT"
// Automatically adds: Co-authored-by: Sarah Johnson <[email protected]>

git push origin feature/user-auth

// 9. End session
// "Thanks for pairing!"
// Leave Discord voice channel
// End Live Share session

Total time: 1-2 hours. Result: Production-ready authentication with zero bugs.

Troubleshooting Common Issues

"Live Share is laggy"

Check:

1. Internet speed (run speed test)

2. VS Code version (update to latest)

3. Too many extensions (disable unused ones)

4. Large files open (close files you're not using)

"Can't hear my partner"

Fix:

1. Check Discord/Zoom audio settings

2. Verify microphone permissions

3. Try different audio device

4. Restart audio application

"Git conflicts after pairing"

Prevention:

# Pull before starting
git pull origin main

# Commit frequently while pairing
# Every 30 minutes or at natural stopping points

# Push at end of session
git push origin feature-branch

What's Next

In Part 4, we'll cover best practices and how to avoid common pitfalls:

• Communication patterns that actually work

• When and how to switch roles

• Handling disagreements productively

• Avoiding pair programming fatigue

Real conflicts from my pairing experience and how we resolved them.

---

Previous: Part 2 - Pair Programming Techniques Next: Part 4 - Best Practices and Pitfalls → Series Home: Pair Programming 101

This article is part of the Pair Programming 101 series. All examples based on real pair programming experiences using TypeScript, Node.js, and modern development tools.