VS Code Tips
- 1. Introduction to VS Code
- 2. Command Palette & Navigation
- 3. Multi-Cursor & Advanced Editing
- 4. Workspace & Global Search
- 5. Keyboard Shortcuts Customization
- 6. Integrated Terminal Secrets
- 7. Custom Snippets & Emmet
- 8. Advanced Git Integration
- 9. Theme & Font Customizations
- 10. Essential Productivity Extensions
- 11. Debugging in VS Code
- 12. Task Automation (tasks.json)
- 13. Remote Development (SSH, Docker, WSL)
- 14. Profiles & Settings Sync
- 15. Best Practices & Speed Up
13. Remote Development
Traditionally, coding remote software required copying files back and forth, using slow terminal editors (like vim/nano), or compiling code locally and deploying. VS Code revolutionized this using the **Remote Development Extension Pack**—which allows you to run your editor locally while compiling, running, and debugging code inside remote servers, Docker containers, or Linux subsystems.
How Remote Development Works
When you initiate a remote connection, VS Code spins up a lightweight **VS Code Server** inside the remote environment. The server hooks directly into the host OS, manages file systems, runs terminals, and executes compilers, while your local desktop VS Code acts as a visual frontend interface. There is zero latency, and files look completely native!
Three Powerful Remote Integration Workflows
The Remote Pack features three specialized extension modules:
1. Remote - SSH
Connect directly to virtual machines or bare-metal servers hosted in the cloud (e.g. AWS EC2, DigitalOcean, or Azure instances) over SSH:
- Click the green Remote Indicator button in the extreme bottom left corner of your VS Code status bar.
- Select **Connect to Host...** and enter your SSH login command:
ssh user@server-ip-address. - VS Code connects, installs the remote helper server, and prompts you to select a directory.
- You can now edit cloud server files, run terminal commands in the host shell, and debug programs natively!
2. Dev Containers (Coding Inside Docker)
Avoid the "it works on my machine" development curse. **Dev Containers** allow you to compile and run your code inside an isolated, identical Docker container containing your exact compiler versions:
- Add a
.devcontainer/devcontainer.jsonfile to your workspace specifying your dev tools and container settings. - Click the Remote status bar icon and select **Reopen in Container**.
- VS Code launches Docker, installs compilers inside the isolated container sandbox, and mounts your files. You are now coding in a fully standardized workspace!
3. WSL (Windows Subsystem for Linux)
If you are a Windows developer, running Unix-specific packages or bash scripts natively can be challenging. **WSL Integration** bridges this gap:
- Inside your WSL Ubuntu shell, type:
code .. - VS Code on Windows launches, connects to WSL instantly, and mounts the Linux file systems. You get Unix speed and terminal scripting, combined with Windows visual assets!
Automatic Port Forwarding
If your remote backend server or Docker container launches a web application on port 3000 or 8080, how do you preview it on your local desktop? VS Code features **Automatic Port Forwarding**:
- It securely forwards port traffic over the remote tunnel.
- Open your local browser and navigate to `http://localhost:3000`. You will see the live output running from the remote cloud instance or Docker container instantly!