• Home

  • Custom Ecommerce
  • Application Development
  • Database Consulting
  • Cloud Hosting
  • Systems Integration
  • Legacy Business Systems
  • Security & Compliance
  • GIS

  • Expertise

  • About Us
  • Our Team
  • Clients
  • Careers

  • Blog

  • EpiTrax

  • VisionPort

  • Contact
  • Our Blog

    Ongoing observations by End Point Dev people

    Setting up SSH in Visual Studio Code

    Couragyn Chretien

    By Couragyn Chretien
    January 6, 2022

    View of Grand Canyon

    Visual Studio Code is a powerful code editor that can create a customized IDE for your development. VS Code’s default configuration is great for working locally but lacks the functionality to give the same experience for remote SSH development. Enter the extension Remote SSH.

    Installation

    Remote SSH in Visual Studio Code Marketplace

    Installing the Remote SSH extension is really easy! First you access the Extension Marketplace with Ctrl+Shift+X or by clicking View > Extensions in the menu, then you just search for and select Remote - SSH.

    Setting up your SSH config file

    To configure your connection, you’ll need to add a few lines to your SSH config. Click the green Open a Remote Window icon on the bottom left corner:

    Open Remote Window

    Select Open SSH Configuration File... and select the config file you want to use. I use the Linux default, /home/$USER/.ssh/config. Add the Host, HostName, and User as required and save:

    Host MySite
      HostName site.endpointdev.com
      User couragyn
    

    Connecting

    Click the green Open a Remote Window icon on the bottom left corner, select Connect to Host..., and pick your desired host, in this case MySite. If your public SSH key isn’t on the remote server, you will be prompted to enter a password. If your key is on the server, it will state it has your fingerprint and prompt you to continue.

    You’re now connected and can use VS Code’s features like Terminal and Debug Console just like you would locally.

    Opening the working directory

    Wouldn’t it be nice to have VS Code automatically open to the correct folder once your SSH connection is established? Unfortunately there isn’t a way to set a folder location in the settings yet; you’d need to click Open Folder and navigate to the project root every time you connect.

    There is, however, a workaround to make this a bit less tedious:

    • Click Open Folder
    • Navigate to the project root
    • Click File > Save Workplace As...
    • Save your .code-workspace file somewhere it won’t be picked up by Git

    Now open your workspace again with a new connection. If the workspace was recently used, you can use File > Open Recent > $Workspace.code-workspace; otherwise go to File > Open Workspace... and select your .code-workspace file. This should get you set up right in the correct directory after you’ve connected.

    SSH with multiple hops

    Sometimes you will need to SSH into one location before tunneling into another. To connect to a remote host through an intermediate jump host, you will need to add ForwardAgent and ProxyJump to the config file, like this:

    Host MySite
      HostName site.endpointdev.com
      User couragyn
      ForwardAgent yes
    
    Host SiteThatNeedsToGoThroughMySite
      HostName completely.different.com
      User couragyn
      ProxyJump MySite
    

    Happy remote development!

    ssh tips visual-studio-code


    Comments