Connect to a Remote Server with SSH in VS Code -- Step-by-Step Tutorial

Introduction

This tutorial will guide you through the process of connecting to a remote server using SSH (Secure Shell) in Visual Studio Code (VS Code). SSH is a secure protocol that allows for remote access and management of servers, making it an essential tool for developers and system administrators. By leveraging VS Code with SSH, you can easily edit, debug, and deploy code on remote machines.

Step 1: Install Visual Studio Code

• Download and install the latest version of Visual Studio Code from the official website.
• Follow the installation instructions specific to your operating system.

Step 2: Install the Remote - SSH Extension

• Open Visual Studio Code.
• Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side or pressing Ctrl+Shift+X.
• Search for "Remote - SSH".
• Click on the Install button to add the extension.

Step 3: Configure SSH on the Remote Server

• Ensure SSH is enabled on your remote server. If you're using a Linux server, it typically comes pre-installed.
• Generate an SSH key pair on your local machine:

  ssh-keygen -t rsa -b 4096
  

  • Follow the prompts and save the key in the default location (usually ~/.ssh/id_rsa).
• Copy the public key to your remote server:

  ssh-copy-id user@remote-server-ip
  

  • Replace user with your username and remote-server-ip with your server's IP address.
• Test your SSH connection:

  ssh user@remote-server-ip
  

Step 4: Open a Remote SSH Session

• In VS Code, press F1 to open the Command Palette.
• Type and select Remote-SSH: Connect to Host....
• Enter the SSH connection string in the format user@remote-server-ip.
• Once connected, you will see a new VS Code window open for the remote session.

Step 5: Managing Multiple Remote Connections

• To switch between multiple SSH connections, use the Command Palette (F1).
• Type and select Remote-SSH: Connect to Host... and choose the desired host from the list.

Step 6: Editing Files Remotely

• Use the Explorer view to browse files on your remote server.
• Click on any file to open it in the editor.
• Make edits as you normally would and save your changes using Ctrl+S.

Step 7: Running Remote Commands

• Open a terminal in VS Code (`Ctrl+``).
• You will be in the context of your remote server.
• Run any command as if you were directly logged into that server.

Step 8: Debugging Remotely

• Set up your debug configuration as needed.
• Use the Debug view in VS Code to start debugging your code running on the remote server.
• The built-in debugging tools will allow you to set breakpoints and inspect variables seamlessly.

Step 9: Extensions and Workspaces

• Explore available extensions that enhance remote development.
• Use workspaces to organize your projects across different remote servers efficiently.

Step 10: Troubleshooting

• Common issues may include:
  • Incorrect SSH key permissions (ensure they are set to 600).
  • Firewall settings blocking the SSH port (default is port 22).
  • Make sure your server is reachable and that SSH is running.

Conclusion

By following these steps, you can successfully connect to a remote server using SSH in Visual Studio Code. This powerful combination allows you to work efficiently on remote projects, manage files, run commands, and debug your applications in a seamless environment. Explore further by installing additional extensions and utilizing workspaces to enhance your remote development experience. Happy coding!