A Windows Guy in a Linux World: VS Code and Remote SSH

choubertsprojects

The Best WordPress plugins!

1. WP Reset

2. WP 301 Redirects

3. WP Force SSL

I’m a Windows guy in the Linux world, but I recently changed my coding environment to VS Code. Here’s why you should too!

The “vscode remote – ssh” is a command that allows users to remotely SSH into their machines. The command can be used with VS Code on Windows or Linux systems.

A Windows Guy in a Linux World: VS Code and Remote SSH

Welcome to the last chapter of A Windows Guy in a Linux World, where you’ll learn how to connect to a remote SSH server using Visual Studio Code. If you’ve been following along with the course, you should now have everything you need to start remotely administering your Linux workstations (including editing files).

Take a look at the previous entries in this series:

Although the tools discussed earlier are valuable, they do not have a Windows-like feel to them. When compared to a native Windows experience, Linux utilities may seem strange and difficult to use. For a more contemporary experience, learn how to edit files directly on your Windows system using Visual Studio (VS) Code in this concluding piece of a five-part series.

Prerequisites

Make sure you have the following items to follow along with the examples in this post:

The Importance of a Good Editing Environment

There is no central registry in Linux. Unlike Windows, Linux centers almost entirely on configuration files. There’s a file someplace that records every change you make in a GUI, every box you check in a web interface, and every configuration modification you make.

You’ll need a good text editor with Linux since configuration files are so vital. There are a few decent ones for Linux, including the Midnight Commander text editor (also known as mcedit), which we previously discussed.

/.bashrc is opened by the Midnight Commander Commandline Text Editor./.bashrc is opened by the Midnight Commander Commandline Text Editor.

This series, on the other hand, is for Windows users who want to work on Linux. Windows has the greatest text editor on the market (arguably). Even better, it works flawlessly with the Linux remoting protocol (SSH).

Microsoft’s Preferred Text Editor is Visual Studio Code.

Visual Studio Code is a text editor from Microsoft that is quite powerful. VS Code has supplanted almost every other text editor in the Microsoft environment as the preferred method of file editing on Windows. Visual Studio Code is a popular topic on our site, so you may already be acquainted with it.

Visual Studio Code is an Integrated Development Environment (IDE) and a syntax-aware editor in one package. This means you can use the editor to troubleshoot your scripts as well as perform shell commands from inside it.

VS Code not only allows you to work with files locally, but it also allows you to edit files remotely over SSH. Instead of using an SSH prompt to go via the command line, you can instantly browse, examine, and edit files without ever leaving VS Code!

In Visual Studio Code, install the SSH Extension.

SSH support isn’t included into VS Code out of the box, but you may add it with the help of the extension marketplace. You’ll need to install the remote SSH extension to do so.

  1. You should notice a block-like sidebar on the left side of VS Code. To access the Extension Marketplace search box, click that button.

In Visual Studio Code, there's a sidebar.In Visual Studio Code, there’s a sidebar.

2. As seen below, type ssh to look for the Remote – SSH extension. The top result should be the official Microsoft extension.

3. To install the Remote – SSH extension, click the green Install button next to it.

VSCode's extension marketplaceVSCode’s extension marketplace

Once installed, a new icon named Remote Explorer should appear in the sidebar, as seen below.

Sidebar for Remote ExplorerSidebar for Remote Explorer

You’re ready to start adding your SSH session at this point.

Using SSH to connect to a target server in Visual Studio Code

Let’s look at how you can use VS Code to connect to your remote Linux system over SSH and edit some files!

  1. To access the Remote Explorer panel, click the Remote Explorer icon you just installed.

2. In the SSH Targets box, click the Plus sign to add a new SSH server to connect to, as shown below.

1647503786_872_A-Windows-Guy-in-a-Linux-World-VS-Code-andOption for SSH Targets

3. Input ssh <user>@ip on the prompt on your target Linux machine, as described in the pre-requisites. For the example below the user is homelab and the ip is 172.25.179.190.

Adding an SSH target to the mixAdding an SSH target to the mix

4. You should now see a blank prompt come up shown below asking where to save the config data. This is the file describing all of the saved connections, in the event we have multiple Linux devices that we connect to. For this example, you can leave the box blank to save in the default location. Press Enter to save the default location (C:users<user profile>.sshconfig).

SSH configuration file selectionSSH configuration file selection

5. Lastly, right-click on the newly established SSH target and choose Connect to Host in Current Window from the context menu. This operation will establish an SSH connection to the target and configure VS Code to function remotely.

Using SSH to connect to the targetUsing SSH to connect to the target

If everything went properly, you should be able to start setting SSH in the following stage right away.

If you are getting stuck at this stage, make sure you actually can SSH to your target computer. The easiest way to test is to open a command window (on Windows 10) and test with ssh <user>@<ip>. If that does not work for you, VSCode will not be able to connect either.

SSH Configuration for Your First Connection

Once you’ve connected to the remote SSH server for the first time, you’ll need to do some initial configuration. As you can see below, VS Code will ask for the type of connection you are making (Linux), and prompt for a password. After a short delay you should see the bottom left corner turn green and say SSH: <your IP>.

The first time connecting technique is shown.The first time connecting technique is shown.

You’ve completed the setup process and are now ready to work with the remote filesystem!

Getting Files and Folders from a Remote Location

After you’ve established a connection for the first time, you may use SSH to access files on the remote Linux server. To do so, follow these steps:

  1. Select the Explorer window from the top-left sidebar.

2. To access a remote folder, click the blue Open Folder icon.

3. Next, choose a folder to open. In the example below, we’re referencing the /home/<username> folder.

When you pick the folder, you may be prompted to enter your password again.

Using the explorer sidebar, create a basic folder.Using the explorer sidebar, create a basic folder.

After you’ve opened a folder, the File Explorer panel should offer you a visual depiction of the contents of the remote folder.

Your workspace refers to the root folder in the File Explorer window. The workspace is the folder you created in step one. The File Explorer window now displays the contents of the folder you opened in the previous step, as seen below.

You can now open any file (like the.bashrc file in the image) and VS Code will show it in the main panel with syntax highlighting!

Exploring a remote SSH target with VSCodeExploring a remote SSH target with VSCode

Technically, you may use the root folder (/) as the workspace, giving you access to the whole disk (read more on the filing system in the second part of this series). If the target workspace is too huge, however, VS Code will have trouble automatically monitoring for changes. You’ll get a warning from VSCode, and you’ll have to reload manually to see the filesystem changes.

Choosing a New Working Folder

What if you open a folder only to find that the files you need are in a different folder? You may open another “base” folder or even add folders to your workspace in this situation.

You may open a whole new folder (while closing the previous one) by going to the File menu, selecting Open Folder, and selecting your new folder. VS Code will be closed and a new workspace will be opened as a result of this action.

If you want to keep the other folder open while adding another folder to your workspace, go back to the File menu and choose Add Folder to Workspace this time. You may add additional folders to the current workspace from here.

In the screenshot below, you can see an explanation of this.

The many workstation solutions availableThe many workstation solutions available

Let’s have a look at what you can do with the file explorer now that you know how to connect to a target and open the explorer window at a folder.

File Transfer Between the Host and the Target

The explorer pane in Visual Studio Code is handy for more than simply exploring and modifying remote files. It may also be used to directly upload and download files to your server!

Drag and drop is all it takes to upload and download files. To upload a local file to a distant server, for example:

  1. Go to the local folder where the file(s) you want to upload to the distant server are stored.
  2. Drag the file(s) from the local Windows explorer window into the VS Code File Explorer.

Done!

To get a file, follow these steps:

  1. Navigate to the file(s) on the remote server that you want to download.
  2. Choose the file(s) you want to download by right-clicking on them and selecting Download.
  3. Choose a location to store them, and voilà, the file has been downloaded (s).

These processes are shown in the video below.

Making use of VSCode's upload functionMaking use of VSCode’s upload function

You can also cut, copy, drag-and-drop, create new files/folders, and do pretty much anything else an explorer window can do. Everything takes place on the server remotely.

Using Visual Studio Code as a Full-Fledged SSH Terminal

VS Code has one more SSH trick in its sleeve: you can use it as a regular SSH terminal!

Select Terminal from the View menu when connecting to an SSH target, as illustrated below. A remote SSH session will be opened using VS Code.

The Terminal Option in VSCodeThe Terminal Option in VSCode

You can perform anything you can do with SSH straight in the terminal. That includes utilizing Midnight Commander, which now offers mouse support! Below is a video of Midnight Commander being launched.

VS Code is used to launch Midnight Commander.VS Code is used to launch Midnight Commander.

Under the hood, VS Code uses the native Windows SSH client (7.7p1 as of Windows 10 v2009). You’ll need the Microsoft SSH client (version 8.1p1 as of this writing) to obtain mouse functionality. Part IV of this series will go through this in further detail.

Modifying Protected Files and Editing Protected Configs

When compared to the command line, there is one disadvantage to utilizing VS Code: it will not alter files that need administrator permissions to update. These are files that must be opened with sudo in order to be edited. There are two methods to get around this issue:

In Linux, the command sudo is used to elevate commands. It’s similar to Windows’ User Account Control. Instead of using an elevated command prompt, you use sudo to perform commands.

You can perform sudo commands in the VS Code Terminal just as you do in a regular SSH window. VS Code, on the other hand, is unable to save files that need administrator privileges to modify. However, you may use a program called Midnight Commander (together with sudo) to establish an explorer window with administrative access within the VSCode command line.

To access the Midnight Commander file management tool, execute sudo mc in the remote SSH session VS Code terminal. Once you’re in here, go to the protected files you want to modify and make the changes you want. You should be able to do so without difficulty.

The actions are listed below.

For administrative modifications, use sudo mc within VSCode.For administrative modifications, use sudo mc within VSCode.

The disadvantage of using sudo mc for administrative modifications is that you are forced to use the VS Code console alone. This implies that most of VS Code’s graphical features, including the explorer pane and the main editing window, are unavailable. For navigating, you’re only allowed to use the terminal window.

VS Code’s Midnight Commander solution will work, but you shouldn’t be changing protected files too frequently. Only use sudo mc if you need to make a modest modification or do a one-time setting.

If you have files that you operate on on a regular basis, you should be added to the folder’s ownership or group. This eliminates the need for administrative rights.

Setting up an SSH Key Exchange Connection with VS Code and SSH is a related post.

Wrap-Up

Thank you to everyone who stayed with us for the whole five-part series. You should now be ready to resume your adventure through the Linux world after configuring VS Code.

With the fundamentals mastered, you may begin branching out into the more practical aspects of Linux, such as operating servers, understanding Docker, and building up your own infrastructure. Stay tuned, and anticipate a slew of new Linux-related initiatives in the near future!

The “vscode-remote ssh profile” is a tool that allows users to connect to Windows machines from Linux. The tool makes use of the SSH protocol, which allows for remote connections.

Frequently Asked Questions

Is SSH for Linux or Windows?

A: SSH is only available for the Linux operating system.

How does VS Code remote SSH work?

A: VS Code on the desktop will connect to an SSH server provided by your operating system, and then from there you can control the remote computer.

How add SSH key to VS Code?

A: VS Code is a text editor. If you are trying to connect via SSH, try using the terminal application instead of your text editor.

Related Tags

  • add ssh key to visual studio 2019
  • vscode-remote-ssh could not establish connection
  • vscode remote ssh save password
  • remote-ssh: kill vscode-server on host
  • remote-ssh allowlocalserverdownload true

Table of Content