FTP/SFTP Extension for Visual Studio Code

Visual Studio Code is the latest popular choice for developers. It is an open source editor available for Windows, Linux, and MacOS. This code editor is developed by Microsoft. Visual Studio Code(short form VS code) includes support for a built-in terminal, embedded Git control, syntax highlighting, snippets, code refactoring and much more. On their marketplace one can find thousands of VS Code extensions for absolutely free.

In this article, we study about one of the popular and must-use extensions for developers which is sftp. This is a developer-friendly extension which makes our development process much easy.

Using this extension, we can transfer files within the editor itself without using any third-party software like FileZilla, WinSCP, etc.

Some of the developers needed sftp extension features are:

  • Browser remote with Remote Explorer
  • Diff local and remote
  • Sync directory
  • Upload/Download
  • Upload on save

How to Install sftp Extension in VS Code

Of course, in order to use Visual Studio sftp extension, you must have VS Code installed on your system. For extension installation, open the editor and click on Extension icon from the left sidebar. In the search field type the ‘sftp’. You will see the list of extensions.

search-extension

From the list, we need to choose the extension which is developed by liximomo. Click on the install button next to the extension.

install-extension

Once you installed it, click on the Reload button which just reloads the editor to complete the installation of the extension.

reload

How to Use sftp Extension in VS Code

We are done with the installation part. Next, let’s see how to use this extension. Open the project in the editor. You can do this from File->Open Folder and select your project directory.

Press the Ctrl+Shift+P if you are on Windows/Linux or Cmd+Shift+P on Mac which opens a command palette. Type SFTP and select the SFTP:config option.

command-pallete

It will open the the sftp.json file in the editor. Fill the details like protocol, host, username, remotePath, etc. Port is default to 22. You can change it if you are using another port. Make sure your local project and remote project are on the same files and folders structure.

Once you entered the details save the file. sftp.json file saved in your project root directory under the .vscode folder. This file is per project. For another project you need to set different sftp.json file.

Note that here you don’t need to enter your password. Extension prompt for password first time when we perform the operation and it is a one-time process.

Let’s open any file from your project. On the right click, you will see the option Upload and Download. Click any of them and it will prompt for a password.

prompt-password

Add the password and hit Enter. sftp extension saved your password safely and now you don’t need to enter the password again.

This extension also provides a Remote Explorer feature where you can see file and directory structure of your remote server.

remote-explorer

Another cool feature provided by extension is Sync local to remote and vice-versa. To do so you need to open command palette and type ‘Sync’ you will see options for “Sync Local -> Remote” and “Sync Remote -> Local”.

Note: Make sure you are performing all operations carefully as it is directly dealing with your remote server.

Related Articles

If you liked this article, then please subscribe to our Youtube Channel for video tutorials.

5 thoughts on “FTP/SFTP Extension for Visual Studio Code

  1. “Open the project in the editor. You can do this from File->Open Folder and select your project directory.”

    “Make sure your local project and remote project are on the same files and folders structure.”

    What about when you are initially downloading a project, can you select a blank folder? Or, you should have this project downloaded locally already?

    Thank you.

    1. You can use both ways. Visual Studio Code is all about opening files inside the selected directory. No matter if you download the files later inside the already selected folder.

  2. This is working awesome but it won’t save passwords. Once I close VS code and open it again I have to enter the password again. I am managing over 500 websites and can’t possibly remember all those passwords to type in each time. Please, give us a way to save passwords.

Leave a Reply

Your email address will not be published. Required fields are marked *