In this article, we will walk you through on how to use Visual Code Code (“VS Code”) to work on a remote machine such as a VM or a remote desktop. As developers, as we work through different projects, our computers keep getting filled with various SDKs, CLI tools, frameworks, and packages. Wouldn’t it be nice, if there was a remote machine or a VM where you can install all of these software (that you will seldom use) and yet be able to work on them using a code editor (Visual Studio Code for example) on your desktop?
TLDR;
- Create an Ubuntu VM in VirtualBox
- Enable SSH access on the VM
- Install an extension called Remote – SSH in VS Code (on your Desktop)
- Connect to the VM from VS Code using Remote – SSH
Step by Step Instructions
Step 1: Install VirtualBox (go to Step 2 if you already have it)
- Download from here
- The host machine’s architecture matters. So download the correct version. In this case, since we are using Apple Silicon, we will need to install version 7.0.8 (or older).
Step 2: Install Ubuntu
- Once again, your desktop’s architecture matters.
- For macOS using Apple Silicon, we recommend using the non-GUI Ubuntu Server (ARM 64)
- Current LTS Download Page
If you got the right ISO image for Ubuntu, the installation will proceed at this point and take usually between 5 and 10 minutes to complete. Could take a bit longer.
Get a coffee 😉
6 minutes and 23 seconds later …
Ubuntu installed!
Step 3: Enable SSH on the new Ubuntu Virtual Machine
Log in to your Ubuntu VM and exectute the following command to update the Ubuntu package manager and isntall OpenSSH server. You will need this to allow VS Code or other code editors to connect to this VM.
sudo apt update && sudo apt install openssh-server -y # Ubuntu/Debian
Enter the following command next to make sure ssh server runs at start up
sudo systemctl enable ssh
(If the second command throws an error, simply restart your vm and rerun the command.)
Start the SSH server:
sudo systemctl start ssh
Check the status:
sudo systemctl status ssh
If all is well, you should see an output like the following, which confirms SSH Server is listening on Port 22.
Step 4: Set Up Network for SSH Access
In VirtualBox, open the Settings for the newly installed Ubuntu VM, and go to the Network tab.
–> Select Bridged Networking for the drop down labelled “Attached to:”.
–> Click OK.
Step 5: Find the new VM's IP address
Type the following command at the VM’s prompt:
ip a | grep "inet "
Look for the row which has something like “enp0s8” and write down the IP address. In my case, it’s 192.168.5.148. Make a note of this.
Step 6: VS Code Setup
Install this extension called “Remote – SSH”
Step 7: Remote-SSH: Add New SSH Host
Open the VS Code Command Palette:
Cmd + SHIFT + P (on macOS)
Ctrl + SHIFT + P (on Windows)
If the right option is not selected, start typing “Remote-SSH …” and you will see the option to select “Remote-SSH: Add New SSH Host…”
Select this command.
Enter:
ssh vm_user_name>@vm_ip_address
In my case it was:
ssh kc@192.168.5.148
Follow the prompts to add this VM as an SSH host on your machine. If all is well at this point, you will get a success prompt at the bottom right-hand corner of VS Code like so:
Click on the Connect button and follow the prompts to add a config file and connect to this Ubuntu VM. For this tutorial, we kept all the default locations.
Step 8: Connect to the VM and Open Terminal
If you are here, that means your setup has been successfully completed. You should see the virtual machine IP address at the bottom left of the screen.
At this point, press CTRL + ` to open a terminal on VS Code and you will see the terminal on your VM.
All done! And that’s how to connect Visual Studio to a Remote Host and keep your machine squeaky clean!
Few Tips and Things to Remember
- The obvious one … the VM must be running for your local machine to connect to it.
- To avoid opening the VirtualBox VM window, right click on the VM name in VirtualBox, as select Start -> Headless Start
- When connecting to the remote host from VS Code, you will have enter the password. Consider setting up SSH Key Authentication
If you enjoyed this article, consider checkout out our engineering blog and subscribing to our monthly newsletters.
Feature photo by Gabriel Heinzer on Unsplash
