Visual Studio Code SSH Tutorial

Issue

How to set up VSCode to remotely access CAEN servers. 

Resolution

Please note that Visual Studio Code is not officially supported by CAEN.  However, as many students use VSCode with SSH in their courses, this guide was created as a useful reference.  

  1. Make sure you are using the U-M VPN. 

  2. Install Visual Studio Code on your personal computer.  

  3. Create SSH Keys and place public key in your CAEN home directory. 

    1. Mac or Linux (unverified)

      1. Open a terminal window (Command + space -> search ‘term’ -> enter)

      2. Run the command cd ~/.ssh to go to the .ssh directory.  If the .ssh directory does not exist, you may have to create it with mkdir ~/.ssh first.  

      3. Run the command ssh-keygen -t ed25519 to create an ssh key.  You may skip any prompts asking about a password.  

      4. Run the command ssh-copy-id <uniqname>.login.engin.umich.edu and complete the duo authentication prompt to transfer your public key to your CAEN home directory in the ~/.ssh/authorized_keys file. 

    2. Windows

      1. Open CMD (you can search “cmd” in the start menu to find it).

      2. Run this command: ssh-keygen -t rsa -b 2048 -C "<your_email>"

      3. You will be asked to select a destination.  It should select ~/.ssh by default.  This is the selection best for most people.  

      4. Run this command to view your public key: cat ~/.ssh/id_rsa.pub

      5. Copy the contents of id_rsa.pub to your clipboard. 

      6. SSH into a CAEN server.  

      7. Run the following commands to copy the contents of your public key into the authorized_keys file: touch ~/.ssh/authorized_keys, echo "your_public_key_here" >> ~/.ssh/authorized_keys.

  4. (optional) You can create a blank profile in VSCode by going to settings -> Profiles -> Create Profile.  This will essentially reset all default settings so you have a clean environment to work with.

    Uploaded Image (Thumbnail)

  5. Install the Remote - SSH extension on VSCode. 

    Uploaded Image (Thumbnail)

  6. Go to the extension on the sidebar, and click the plus icon next to "SSH".

    Uploaded Image (Thumbnail)

  7. In the popup, type your ssh connection command.  For example, ssh <uniqname>@login.engin.umich.edu.

  8. Hit enter to add the host to your ssh config on your personal computer. 

  9. Refresh your remotes list.

    Uploaded Image (Thumbnail)

  10. Click the folder or arrow icon next to the server name.  This will open a new window.  In the future, you can click the arrow to enter a folder you previously set up next to the name of the folder. 

    Uploaded Image (Thumbnail)

  11. Enter your password and duo choice for the next two prompts.  This is the same as if you were entering through the terminal.  NOTE: Some setups don’t work well with duo authentication.  If you don’t get a duo prompt (it might give a second password prompt, this is still intended for your standard duo options), you might want to try hitting “details” on the banner that appears on the lower right corner.  This should show an “output” terminal with the duo choices.  You can select your choice here.  It may show up with a duo/password prompt as a VSCode popup after doing so.  You can fill the same duo choice there as well.  

  12. Click "Open Folder".  This will allow you to select a folder from your CAEN home directory to open.  You will be prompted again for your password and duo choice.

    Uploaded Image (Thumbnail)

Profiles

Visual Studio Code enables the use of “profiles” to create alternative configurations depending on your use case.  Each profile has separate settings, extensions, themes, and so on.  You can also import and export profiles to easily share or backup your configurations via the settings menu as seen in the example below.  

Uploaded Image (Thumbnail)

Troubleshooting

VSCode could break for any number of reasons.  Here are some basic troubleshooting steps you can take if anything runs amiss:

  1. Create a new default profile to make sure there’s nothing wrong with your profile settings. 

    1. Click the settings icon -> Profiles -> Create Profile…

      Uploaded Image (Thumbnail)

    2. Copy from “None”. 

    3. Make sure you have the new profile selected. 

  2. As a last resort, clear cache

    1. Close VSCode

    2. Cached data is stored in different locations depending on your operating system.  

      1. Windows: %APPDATA%\Code\

      2. MacOS: ~/Library/ApplicationSupport/Code

      3. Linux: ~/.config/Code

    3. You should now create a backup of any files/folders you wish to delete, such as Cache, CachedData and CachedExtensions.  

    4. Delete the caches.  

Print Article