VS Code Remote Development - ARC-Lab-UF/docs GitHub Wiki

Visual Studio Code (VS Code) makes development on a remote server incredibly simple. This tutorial goes through the process of connecting Visual Studio Code to a SHREC/ARC Lab Linux server for remote development.

---

• Have VS Code installed on your local computer.
• Optional: If working off-campus (or not on the UF network), you must be connected to the UF VPN
• Have access to your server via SSH. See Connecting with SSH if you haven't set this up yet.
• Have SSH config file configured on your local computer. See this section for instructions.

VS Code has a Remote Development extension pack by Microsoft that can be used to remote into the server. In the Extensions pane, use the text box to search for either Remote - SSH or ms-vscode-remote.remote-ssh which will lead you to the exact extension. Install the extension.

Note: Only the "Remote - SSH" extension (ms-vscode-remote.remote-ssh) is necessary to remote into the server. However, the Remote Development extension pack also installs two other useful extensions for remote development in Docker containers and WSL instances, which can be useful. Feel free to install the larger extension pack if you ever develop in WSL or Docker containers.

Next, we will use the Remote - SSH extension to connect to the server. Notice on the left pane, a new "Remote Explorer" icon exists.

If you setup your ~/.ssh/config file correctly, VS Code's Remote Explorer should automatically be populated with the hosts you have configured (as shown in the screenshot below. See this section if you haven't set it up yet.

In the Remote Explorer window, hover over the SSH Target you wish to connect to. Two icons will appear. The icon will connect to the host using your current VS Code window. The icon will do the same, but in a new VS Code window.

As VS Code attempts to connect, it may ask you which type of operating system the Host is. Select Linux. VS Code may also ask for your GatorLink password. If so, enter it and press Enter/Return.

Note: If you get an error while the new window attempts to connect to the server and you are off-campus (or not on a UF network), make sure you have connected to the GatorLink VPN (see above link for tutorial).

If it connected successfully, the bottom left corner of your VS Code window should indicate the host it's connected to:

At this point, you have successfully connected to the server.

VS Code's remote extension also allows you to open terminal shells from within VS Code, so you don't have to manage separate windows.

To open a Terminal in VS Code, do one of the following (whichever you find most convenient):

1. Ctrl+`
2. Ctrl+J
3. You can also do Ctrl+Shift+P to open the command palette, then type "toggle terminal" and press enter.

See this guide for more info on using the integrated VS Code terminal.

Note: Opening a VS Code terminal window while connected to a Remote - SSH host will provide access to a shell on the remote host.

VS Code works almost entirely the same in a remote environment as it does in a local environment. Thus, you can use the Explorer pane on the left to navigate directories and files, edit those files, and use other VS Code features in the same way. You can also use the integrated terminal to perform useful tasks, although many of them will not be covered in this tutorial.

While your terminal may be in your home directory (notated by the ~), VS Code most likely is not. To change the folder VS Code is working in, either click File > Open Folder... or Press the top left "Explorer" pane icon and press the Open Folder button in the Explorer pane.

You will be asked to enter the path of the folder. The path to each user's home folder is usually: /home/UFAD/<username>. For example, if I'm working on Dr. Stitt's SystemVerilog tutorial, I could open the following folder: /home/UFAD/<username>/git/sv-tutorial. Type this in and press OK. VS Code will reload into the new folder. You should see the Explorer pane update with folders and files in your chosen directory.

Note: While you could use your home directory as the folder you open in this window, it is not recommended. VS Code parses all of the subdirectories for Git repositories, etc., so if you have a large home directory, this can be overwhelming.

Remember the extensions you installed for remote development? Those were installed on your local VS Code instance. You can also install extensions into your remote VS Code instance (this is because VS Code actually installed a VS Code server on your remote server, it's part of the way remote development works).

For example, if you plan on using Python on the server, the Python extension may be helpful to install on the remote instance. Install the Python extension (or search for ms-python.python) (while you are connected to the server) in the same fashion you installed the remote development tools from before. The install button should read Install in SSH: <server hostname>...". Press this button to install the Python extension on the server rather than in on your local VS Code instance.

Note: At this point, you may need to reload the VS Code window by either by clicking the gear icon in the bottom left, pressing Command Palette..., and typing >Developer: Reload Window and pressing Enter. You may also have to Kill your terminal and create a fresh one by pressing the 🗑 (garbage bin) icon in the active terminal and pressing View > Terminal to create a new one.

At this point, two things should change. If you open a Python source file, you should see a Green Play button in the top right. If you see this, the Python extension is working.

For additional instructions and information, visit the Visual Studio Code Official Documentation for Remote Development using SSH.