Connect VSCode editor to remote with WSL SSH key

3 min read 25-10-2024
Connect VSCode editor to remote with WSL SSH key

In today's development landscape, it's common for developers to work with remote servers, whether for deployment, collaboration, or accessing resources. One effective way to manage these servers is by using Windows Subsystem for Linux (WSL) along with Visual Studio Code (VSCode). In this article, we will guide you through the process of connecting your VSCode editor to a remote server using SSH keys from your WSL environment.

Scenario Overview

Let’s consider a typical scenario where you are developing an application on your local machine but need to test or deploy it on a remote Linux server. You have set up WSL and installed your favorite development tools, but you need to connect to the server seamlessly. The following steps will walk you through how to configure this setup using SSH keys.

Original Code for the Problem

For the sake of clarity, we will not start with any specific "code" per se, but we will use the concept of SSH commands in our guide. If you have previously attempted to establish an SSH connection but faced issues, the SSH command might look something like this:

ssh username@remote_server_ip

This command is the foundation for connecting to a remote server, but utilizing SSH keys streamlines the process.

Steps to Connect VSCode to a Remote Server with WSL SSH Keys

Step 1: Install WSL

If you haven’t already installed WSL, you can do so by following these steps:

  1. Open PowerShell as an administrator and run:
    wsl --install
    
  2. Restart your machine when prompted.

Step 2: Set Up an SSH Key

  1. Open your WSL terminal.
  2. Generate a new SSH key pair with the following command:
    ssh-keygen -t rsa -b 4096 -C "[email protected]"
    
  3. You will be prompted to specify the file where the key will be saved. Just press Enter to accept the default location (usually ~/.ssh/id_rsa).

Step 3: Copy Your SSH Key to the Remote Server

  1. Use the following command to copy your SSH public key to the remote server:
    ssh-copy-id username@remote_server_ip
    
  2. Enter your password for the remote server when prompted.

Step 4: Open VSCode and Install the Remote Development Extension

  1. Launch Visual Studio Code.
  2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or pressing Ctrl + Shift + X.
  3. Search for "Remote - SSH" and install it.

Step 5: Configure SSH in VSCode

  1. Open the Command Palette (Ctrl + Shift + P) and type Remote-SSH: Add New SSH Host.
  2. Enter the SSH command similar to:
    ssh username@remote_server_ip
    
  3. Choose the configuration file you want to update (~/.ssh/config is recommended).

Step 6: Connect to Your Remote Server

  1. Open the Command Palette again and type Remote-SSH: Connect to Host....
  2. Select the host you just added from the list.
  3. VSCode will now establish a connection to your remote server.

Troubleshooting Tips

  • Ensure that your SSH service is running on the remote server.
  • Check your firewall settings if you're unable to connect.
  • Verify that the SSH key permissions are correctly set (chmod 600 ~/.ssh/id_rsa).

Practical Example

Let’s say you're working on a Node.js application locally, and you want to deploy it on a remote Ubuntu server. By using the above steps, you can easily edit files directly on your server through VSCode, run commands in the terminal, and streamline your development workflow.

With this setup, you can also take advantage of features like debugging and version control directly on the remote server, enhancing your productivity.

Conclusion

Connecting your VSCode editor to a remote server using WSL SSH keys is a straightforward process that opens up new avenues for development and collaboration. By leveraging WSL and VSCode, you can create a powerful development environment that simplifies remote work.

Additional Resources

This article should equip you with the knowledge to establish a remote connection with ease. If you have further questions or need clarification on any step, feel free to reach out!