How to configure and use VS Code remote development?

VS Code remote development allows you to develop on remote machines, containers, or WSL while enjoying the full experience of local VS Code. Implemented through SSH, Containers, and WSL extensions.

Remote Development Modes

SSH Remote Development

Develop by connecting to a remote server via SSH.

Container Remote Development

Develop inside Docker containers.

WSL Remote Development

Develop inside Windows Subsystem for Linux.

SSH Remote Development Configuration

Install Extension

Install the "Remote - SSH" extension.

Configure SSH Host

Edit SSH configuration file ~/.ssh/config:

shell
Host myserver
    HostName 192.168.1.100
    User username
    Port 22
    IdentityFile ~/.ssh/id_rsa

Connect to Remote Host

1. Press F1 or Ctrl+Shift+P to open command palette
2. Type "Remote-SSH: Connect to Host"
3. Select the configured host
4. Enter password or key on first connection

Remote Development Workflow

File Operations

• Open folder on remote server as workspace
• All file operations execute on remote server
• Local VS Code serves as interface and editor

Extension Management

• Local Extensions: Run locally, like themes, keyboard shortcuts
• Remote Extensions: Run on remote server, like language servers, debuggers
• Extensions are automatically categorized and installed

Terminal Usage

• Integrated terminal runs on remote server
• Supports multiple terminal sessions
• Terminal environment matches remote server

Container Remote Development

Docker Configuration

1. Install "Remote - Containers" extension
2. Ensure Docker is installed locally
3. Create .devcontainer folder in project

devcontainer.json

json
{
  "name": "My Development Container",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": ["dbaeumer.vscode-eslint"]
    }
  },
  "postCreateCommand": "npm install"
}

Using Container Development

1. Open command palette
2. Select "Remote-Containers: Reopen in Container"
3. VS Code will reopen project in container

WSL Remote Development

Configure WSL

1. Install WSL 2
2. Install "Remote - WSL" extension
3. Open project in WSL

WSL Features

• Complete Linux environment
• Integration with Windows file system
• Support for multiple WSL distributions

Performance Optimization

File Sync

• Avoid syncing large numbers of files
• Use .vscodeignore to exclude unnecessary files

Extension Optimization

• Only install necessary remote extensions
• Disable unnecessary extensions

Network Optimization

• Use SSH keys instead of password authentication
• Configure SSH keep-alive
• Consider using SSH tunneling for acceleration

Common Issue Resolution

Connection Failure

• Check SSH configuration
• Verify network connection
• Confirm SSH service running on server

Performance Issues

• Check network latency
• Optimize file synchronization
• Reduce number of extensions

Extension Issues

• Some extensions may not support remote development
• Check extension compatibility
• Manually install remote extensions

Important Notes

• Remote development requires stable network connection
• Ensure remote server has sufficient resources
• Pay attention to file permissions and path issues
• Sensitive data should be stored on remote server
• Regularly backup remote code