VS Code Remote Development Setup - Complete Guide

# SSH config file (~/.ssh/config)
Host dev-server
    HostName 192.168.1.100
    User developer
    Port 22
    IdentityFile ~/.ssh/id_rsa
    ForwardAgent yes
    ServerAliveInterval 60

# Connect to remote host
Ctrl+Shift+P → "Remote-SSH: Connect to Host"
Select: dev-server
Enter password if prompted

# .devcontainer/devcontainer.json
{
  "name": "Node.js Development",
  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:18",
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint"
      ]
    }
  },
  "forwardPorts": [3000, 8080],
  "postCreateCommand": "npm install"
}

# Install WSL
wsl --install

# Install specific distribution
wsl --install -d Ubuntu-22.04

# Connect to WSL
Ctrl+Shift+P → "WSL: Connect to WSL"
Select distribution: Ubuntu-22.04

# WSL configuration
# .wslconfig (Windows)
[wsl2]
memory=4GB
processors=2
swap=2GB

# Generate SSH key pair
ssh-keygen -t rsa -b 4096 -C "your-email@example.com"

# Save to default location
Enter file in which to save the key: ~/.ssh/id_rsa
Enter passphrase (optional): [your-passphrase]

# Copy public key to server
ssh-copy-id user@hostname
# Or manually copy
cat ~/.ssh/id_rsa.pub | ssh user@hostname "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys"

# Start SSH agent
eval "$(ssh-agent -s)"

# Add SSH key
ssh-add ~/.ssh/id_rsa

# Add to shell profile
echo 'eval "$(ssh-agent -s)"' >> ~/.bashrc
echo 'ssh-add ~/.ssh/id_rsa' >> ~/.bashrc

# Test connection
ssh -T user@hostname

# ~/.ssh/config
Host production
    HostName prod.example.com
    User deploy
    Port 22
    IdentityFile ~/.ssh/prod_key
    ForwardAgent yes
    ServerAliveInterval 60
    ServerAliveCountMax 3
    Compression yes
    ControlMaster auto
    ControlPath ~/.ssh/control-%r@%h:%p
    ControlPersist 10m

Host staging
    HostName staging.example.com
    User developer
    Port 2222
    IdentityFile ~/.ssh/staging_key
    ForwardAgent yes
    LocalForward 3000 localhost:3000
    LocalForward 5432 localhost:5432

{
  // Remote SSH settings
  "remote.SSH.remotePlatform": {
    "production": "linux",
    "staging": "linux"
  },
  "remote.SSH.configFile": "~/.ssh/config",
  "remote.SSH.useLocalServer": true,
  "remote.SSH.enableDynamicForwarding": true,
  
  // Remote containers settings
  "remote.containers.defaultExtensions": [
    "ms-vscode.vscode-json",
    "esbenp.prettier-vscode"
  ],
  "remote.containers.dockerPath": "docker",
  
  // Remote WSL settings
  "remote.WSL.fileWatcher.polling": true,
  "remote.WSL.useShellEnvironment": true
}

# .devcontainer/devcontainer.json
{
  "name": "Full Stack Development",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",
  
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/node:1": {
      "version": "18"
    }
  },
  
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "ms-vscode.vscode-typescript-next",
        "bradlc.vscode-tailwindcss"
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
        }
      }
    }
  },
  
  "forwardPorts": [3000, 8080, 5432],
  "portsAttributes": {
    "3000": {
      "label": "Frontend",
      "onAutoForward": "notify"
    },
    "8080": {
      "label": "Backend",
      "onAutoForward": "notify"
    }
  },
  
  "postCreateCommand": "npm install",
  "postStartCommand": "npm run dev"
}

# .devcontainer/docker-compose.yml
version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ../..:/workspaces:cached
    command: sleep infinity
    networks:
      - dev-network
    depends_on:
      - db
      - redis

  db:
    image: postgres:15
    environment:
      POSTGRES_DB: myapp
      POSTGRES_USER: developer
      POSTGRES_PASSWORD: password
    volumes:
      - postgres-data:/var/lib/postgresql/data
    ports:
      - "5432:5432"
    networks:
      - dev-network

  redis:
    image: redis:7
    ports:
      - "6379:6379"
    networks:
      - dev-network

volumes:
  postgres-data:

networks:
  dev-network:
    driver: bridge

{
  // Automatic port forwarding
  "remote.autoForwardPorts": true,
  "remote.autoForwardPortsSource": "hybrid",
  
  // Port forwarding settings
  "remote.portForwarding.showNotification": true,
  "remote.portForwarding.includeLocalhost": true,
  
  // Specific port configurations
  "remote.portsAttributes": {
    "3000": {
      "label": "React Dev Server",
      "onAutoForward": "notify"
    },
    "8080": {
      "label": "API Server",
      "onAutoForward": "silent"
    },
    "5432": {
      "label": "PostgreSQL",
      "onAutoForward": "silent"
    }
  }
}

// Forward ports manually
Ctrl+Shift+P → "Remote-SSH: Forward Port"
Enter port number: 3000
Enter local port: 3000

// View forwarded ports
Ctrl+Shift+P → "Remote-SSH: Show Forwarded Ports"

// Stop port forwarding
Right-click port → "Stop Forwarding"

// Port forwarding in SSH config
Host dev-server
    HostName 192.168.1.100
    User developer
    LocalForward 3000 localhost:3000
    LocalForward 8080 localhost:8080
    LocalForward 5432 localhost:5432

// Install extensions on remote
Ctrl+Shift+X → Search extension → Install
Extensions are installed on remote machine

// Sync extensions
Ctrl+Shift+P → "Extensions: Sync Extensions"
Choose sync method:
- Sync to remote
- Sync from remote
- Manual sync

// Extension recommendations
// .vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-typescript-next"
  ]
}

{
  // Remote performance
  "remote.SSH.useLocalServer": true,
  "remote.SSH.enableDynamicForwarding": true,
  "remote.SSH.remoteServerListenOnSocket": true,
  
  // File watching
  "remote.autoForwardPorts": true,
  "remote.autoForwardPortsSource": "hybrid",
  
  // Terminal performance
  "terminal.integrated.shell.linux": "/bin/bash",
  "terminal.integrated.shellArgs.linux": ["-l"],
  
  // Editor performance
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  }
}

// Connection issues
1. Check SSH key permissions: chmod 600 ~/.ssh/id_rsa
2. Verify SSH config: ssh -T user@hostname
3. Check firewall settings
4. Restart SSH service: sudo systemctl restart ssh

// Extension issues
1. Reload window: Ctrl+Shift+P → "Developer: Reload Window"
2. Check extension compatibility
3. Reinstall extensions on remote
4. Clear extension cache

// Performance issues
1. Check network latency
2. Optimize file watching
3. Use local server mode
4. Reduce extension count

// Enable debug logging
Ctrl+Shift+P → "Remote-SSH: Show Log"
Check for error messages

// Test SSH connection
ssh -v user@hostname
ssh -vv user@hostname
ssh -vvv user@hostname

// Check remote server
ssh user@hostname "ps aux | grep vscode"
ssh user@hostname "netstat -tlnp | grep :22"