Enable VSCode SFTP editing support

Do you want to edit files remotely through SFTP in VSCode (Visual Studio Code)?

VS Code is now one of the most popular open source code editor. The editor is free, supported by Microsoft and brings a lot of advanced editing features to the masses, include syntax highlighting, smart code completion, code refactoring, Git integration, etc.

But the thing that made VSCode stands out is its extendable nature. Users can do all sorts of things without leaving the code editor, thanks to the VS Code Marketplace with thousands of useful extensions and themes.

This article is going to show you how to edit files in another machine through SFTP protocol, with and without password, inside VSCode.

Prerequisites

To be able to work with files remotely through SFTP, we have to install extensions. Currently there are many extensions that support this feature, but only a few of them worth checking out.

In the article, we will use SFTP (VSCode-sftp) by liximomo to as an example.

Install VSCode-sftp

  1. Open up Visual Studio Code and go to Extension tab

    open vscode extension tab

  2. Type "sftp" in the search box and press Enter. Select Install in the lower right corner of the extension.

    search for sftp extension vscode

VSCode-SFTP : Connect to other machines

To be able to use SFTP in VSCode, you need to work in a folder/directory. Open a directory by pressing Ctrl + K and Ctrl + O, then select one.

Once you have a directory opened in VSCode, let's open SFTP extension configuration. First, bring up the Command Palette by pressing Ctrl+Shift+P. Type in sftp config in the search input and select SFTP: Config. The configuration file of SFTP extension will be opened immediately.

Open SFTP extension configuration

Here you are able to set the name for the workspace, the hostname or IP, username, password (optional). You will also be able to change the uploadOnSave setting to false so that files would not be uploaded right after you save them.

vscode-sftp settings

Be sure to set remotePath to a directory that you have appropriate permissions (read and write). If

This configuration file is now saved inside the folder/directory you've opened with the name sftp.json and applies to the specific directory only.

VSCode-SFTP : Upload edited files to server

Now that SFTP extension has been set up, you can open any file inside the directory you've just opened. When you save a file for the first time in a session, an input box would pop up, allowing you to enter the password for the username in sftp.json. This password is saved and automatically used throughout the session, without you input it over and over again, until you close or restart VSCode.

image-20210516214234451

Once you entered the correct password, vscode-sftp will automatically upload the file into the server using SFTP protocol.

Please note that the whole directory would not be synced with the server, only the changed files. For example, we had a bunch of files in the directory, but only edit one file named "Check.php". Only that file will be recognized by vscode-sftp and uploaded to the server.

VSCode-SFTP : Edit files in the server

VSCode-SFTP allows you to edit files remotely through SFTP protocol. To be able to do that, you need to be authenticated, either via password or SSH keys.

If you don't mind exposing your password in the configuration file, you can add a line in sftp.json file, specify your password in raw text.

config vscode-sftp password

For better security, you can generate a SSH key pair and put it in your home directory. On Windows machine, that would be C:\Users\your_username\.ssh\config. On Linux, users would have to put SSH keys in ~/. **ssh**/authorized_keys.

Once you've authenticated with one of the two ways above, vscode-sftp would be able to load files in remotePath (specified in sftp.json) and show it in SFTP tab.

SFTP tab in VSCode

You can view the list of files and the file itself, but to be able to update it, you need to edit the local version of it. To do that, right-click the filename and select Edit in Local.

image-20210516220243735

Once you've done editing, save the file and VSCode will then automatically transfer it to the server for you. You can see it in the terminal output:

VSCode SFTP terminal output

Conclusion

That's it. We've demonstrated the basic usage of VSCode-SFTP extension. Personally we find the extension not exactly easy to use as we expect. But for people who fiddle with different servers on a daily basis, it may be useful.

SSH FS is another extension that looks more promising. It is more advanced in terms of features, yet simpler to use because you would be able to mount remote directory as local workspace directory. We will cover it on LinuxPip in the nearest future, stay tuned.

Click to rate this post!
[Total: 18 Average: 5]

Leave a Comment