SSH Remote Login with Visual Studio Code

SSH Remote Login with Visual Studio Code

Using a Visual Studio Code (VS Code) for SSH remote login can significantly improve your productivity. Although it is a remote environment, you can operate as if it were a local environment with high visibility of directory structure and an advanced text editor environment. Here are the steps for establishing SSH remote login with VS Code.

STEP 1. Install Remote Development Extension

Open VSC and select the extension icon from the left sidebar. Search for the Remote Development extension and click on the Install button.

Install Remote Development Extension

Remote Development includes the following extensions:

Remote - SSH
Remote - SSH: Editing Configuration Files
Remote Explorer
WSL
Dev Containers

STEP 2. Establish SSH Remote Connection

1. Select the remote login icon on the left sidebar in the Remote Explorer

Establish SSH Remote Connection with VS Code: Step 1

2. Click the setting icon to select the SSH config file

Establish SSH Remote Connection with VS Code: Step 2

3. Select your SSH config file

Establish SSH Remote Connection with VS Code: Step 3a

When you select the file, you'll see the config file contents in the right window. (Please refer to the previous section about how to make the config file.)

Establish SSH Remote Connection with VS Code: Step 3b

4. Click on the arrow or window icon of the SSH host name.

By clicking on the arrow icon, you can connect to the host in the same window. When you click on the window icon, a new VS Code window opens and establish the SSH connection in the new window.

Establish SSH Remote Connection with VS Code: Step 4

Note: VS Code may also ask the platform (OS) of the host server. Select Linux if asked.

5. If you set a passphrase for the private key, you need to enter the passphrase to move forward.

Establish SSH Remote Connection with VS Code: Step 5

6. Once VS Code is connected to the remote server, you'll see the status at the bottom left corner of the VS Code window.

Establish SSH Remote Connection with VS Code: Step 6

7. To open directories in the remote server, select the file icon on the left and press the Open Folder button.

Establish SSH Remote Connection with VS Code: Step 7

8. Select the highest directory hierarchy to display in the VS Code editor

If you want to show only your home directory (/home/ubuntu/), press the ok button. You can also change the highest directory. If you want to show the entire directory tree, type / and press the OK button.

Establish SSH Remote Connection with VS Code: Step 8

9. If you set a passphrase for the private key, VS Code will ask for the passphrase again.

Establish SSH Remote Connection with VS Code: Step 9

10. On the first access, VSC will ask if you can trust the folder.

Select the Yes button to connect to the folder.

Establish SSH Remote Connection with VS Code: Step 10

STEP 3. Open a Terminal and check the SSH Remote Login Environment on VS Code

To open a Terminal in the VSC window, select Terminal on the Mac menu bar and click on New Terminal.

Open a Terminal and check the SSH Remote Login Environment on VS Code: Step 1

Now you can work on the remote server as if it were in the local environment.

Open a Terminal and check the SSH Remote Login Environment on VS Code: Step 2

STEP 4. Close SSH Remote Connection

Press the bottom left SSH green icon and find the "Close Remote Connection" menu in the search bar at the top. Click the "Close Remote Connection" menu to close the connection.

Close SSH Remote Connection

Tips: Use Terminal

If you cannot establish the SSH remote connection on VS Code the first time, try the first remote connection using the Terminal application (see the previous section). It may solve the problem. You can use VSC starting from the second connection to the remote server.

Terminal and VS Code

You can also learn this topic offline. Click .

Tags:

VS Code

SSH

Remote Connection