Using VS Code Over SSH

Posted at — Jun 15, 2019

Microsoft have already dethroned Notepad++ and they are coming for Samba. It’s no longer necessary to mount remote volumes, as VS Code allows you to interact with files over SSH as if they were local. This is a giant leap forward, allowing you to keep using themes, formatters and extensions on a remote machine.

Windows

Source: https://code.visualstudio.com/docs/remote/ssh

  1. Ensure VS Code version is >= 1.35 (May 2019)

  2. Install Remote Development through the VS Code marketplace

  3. Install OpenSSH client and server through Settings > Apps & Features > Manage Optional Features

  4. If you are using Pageant and Putty follow these instructions. Ensure your public key is in ~/.ssh/authorised_keys.

    1. Else add this line to settings.json in VS Code "remote.SSH.showLoginTerminal"*: true,. Unfortunately you will have to enter your password multiple times. Research can be done from here to find out how to avoid this. It will probably involve running ssh-keygen in the command line.
  5. Either from the command palette (F1) or from the >< icon in the bottom left run

    1. Remote-SSH: Open Configuration File... > Configure SSH Hosts

    2. Select the first option and insert a SSH config. For example:

      Host <name-of-ssh-host>
          User <your-user-name-on-host>
          HostName <host-fqdn-or-ip>
          IdentityFile C:\path\to\your\exported\private\keyfile\from\step\3
          ForwardAgent yes
      
  6. Now run Remote-SSH: Connect to Host... > <name-of-ssh-host>. A new VS Code window should open and connect to the virtual machine.

Linux

Perform steps 1, 2 and 5

Disconnecting from SSH

As of now the only way I have found of disconnecting is to close the VS Code window. Typing exit into the terminal doesn’t work and there doesn’t seem to be any options in the Remote-SSH left panel.

Using the Terminal

After opening the new SSH VS code window there should be a panel open with a terminal which says:

Connected to SSH Host - Please do not close this terminal

If you click the + in the bar above this message, a bash terminal should open at the directory you are currently in. cding won’t move your position in the explorer but git etc will work as expected. To open files you can use code path/to/file

Tips and Tricks

  • To perform text search in the open directory press Ctrl-Shift-F

  • To find a file by name use Ctrl-P

  • To search for an action to perform (such as Toggle Word Wrap, Format Document, Reload Window etc) use Ctrl+Shift+P or F1

  • To go to a line number use Ctrl-G <line number>

Worthy Extensions

  • Git Lens - Highly capable git capabilities that allow lots of interesting features like inline blame annotations, multiple repositories, file history, dynamic comparison of branches and much more. Better to stick to command line for actual git commands, but for viewing diffs, blame etc it’s priceless

  • Prettier - Code formatter for many languages, can be manipulated with JSON. Works best with the editor.formatOnSave setting set to true.

  • Perltidy - Same as above but uses the perl library. These command line arguments work better with Netcraft syntax “perltidy.additionalArguments”: ["–cuddled-else”, “–all-containers-tightness=2”]

  • Bookmarks - Useful for large files where changes need to be made across multiple functions, bookmarks can be toggled with a keyboard shortcut and appear in the scroll bar.