Bring Remote Dev Machines into VS Code

Using the remote development extension in Visual Studio Code, you can work on your development machine, just as you would locally. Find out how in this article.

Connect to Dev Box using VS Code Extension

When you install the remote development extension bundle, you'll be able to connect to hosts via SSH (like in this article), connect to your WSL distributions, and connect to containers running on other hosts.

Installing the Extension

Once you've installed visual studio code and opened it, you'll notice a few icons on the left-hand side. Click on the icon that looks like connecting Tetris blocks.

extension-icon-visual-studio-code
Extension Icon in Visual Studio Code (left-side by default)

Type "Remote Development" in the search bar to search for the extension. Click on "Install" to install the extension in Visual studio

Share SSH Keys with Dev Box

In order to login without having to enter your password each time, you'll copy your ssh keys to the remote machine.

In the VS Code file menu, Click on Terminal to open the PowerShell prompt. Type the following to generate a new ssh key (replace email address with your own): ssh-keygen -t rsa -b 4096 -C "chad@example.com" -f C:\Users\chad\.ssh/devbox_rsa

Copy your public key to the remote machine, where azureuser is the user and mydevbox.southcentralus.cloudapp.azure.com is the fully qualified domain name (FQDN) of the dev machine: type $env:USERPROFILE\.ssh\devbox_rsa.pub | ssh azureuser@mydevbox.southcentralus.cloudapp.azure.com "cat >> .ssh/authorized_keys"

Add Host to VS Code and Connect

Click on the remote development icon on the left-hand side menu.

remote-development-icon-vscode
Remote Development Icon in Visual Studio Code (VS Code)

From the dropdown, select "SSH Targets" and click on the "+" next to SSH Targets. Enter the following command to ssh to the remote machine: ssh -i C:\Users\chad\.ssh\devbox_rsa azureuser@mydevbox.southcentralus.cloudapp.azure.com

VS Code will prompt you to select the configuration file to update. Click on the config file located in C:\Users\$USER\.ssh\config

NOTE: The config file (in $HOME\.ssh\)will have the following contents:

Host mydevbox.southcentralus.cloudapp.azure.com
  HostName mydevbox.southcentralus.cloudapp.azure.com
  IdentityFile C:Userschad.sshdevbox_rsa
  User azureuser

In the lower-left (in VS Code) click on the green connection icon

vscode-connection-button
Connection button in Visual Studio Code (VS Code)

VS Code will prompt you for a remote connection. Select "Connect to Host" and select the dev box that we just added (mydevbox.southcentralus.cloudapp.azure.com)

A new VS Code window will appear with a connection to the remote host (looks the same, except it will say SSH: mydevbox.southcentralus.cloudapp.azure.com

vscode-ssh-connection-established
SSH connection in Visual Studio Code (VS Code)

In the VS Code file menu, Click on Terminal to open a shell to the remote machine. Verify that it's your devbox by typing lsb_release -a (it's Ubuntu, not Windows)

(OPTIONAL) Run a Script on your Dev Box

Run this script to install the Azure CLI. Type this command to download the script: curl -O https://gist.githubusercontent.com/chadmcrowell/5ea7f337cab8605c011d637f3f5aa602/raw/e3cc13de997d71081b00f744b739572110582e59/install-azurecli.sh

Change the file to executable using the command chmod +x install-azurecli.sh

Run the script using the command ./install-azurecli.sh