FTP/SFTP Extension for Visual Studio Code

Visual Studio Code is the latest popular choice for developers. It is an open-source code editor available for Windows, Linux, and macOS operating systems. 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 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 easier.

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

Some of the useful sftp extension features are:

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

How to Install sftp Extension in VS Code

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

Search Extension

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

Install Extension

It will then install the extension globally on your system.

How to Use sftp Extension in VS Code

After installing the extension, 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 sftp.json file in the editor. You will get the content like below in the sftp.json file.

{
    "name": "My Server",
    "host": "localhost",
    "protocol": "sftp",
    "port": 22,
    "username": "username",
    "remotePath": "/",
    "uploadOnSave": true
}

Fill the details like protocol, host, username, remotePath, etc. Port is default to 22. You can change it if you are using another port. I recommend keeping the “uploadOnSave” value as false so the file will not upload automatically on saving it. While using the extension, make sure your local project and remote project have the same files and folders structure.

Once you enter the details save the file. sftp.json file saved in your project root directory under the .vscode folder. This file is for a single project. For another project you need to follow the same steps and set a sftp.json file.

Note that here you don’t need to enter your password. Extension prompt for password first time when you 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 to Upload and Download. Click any of them and it will prompt for a password.

prompt-password

Add the password and hit Enter. The sftp extension saved your password safely and now you don’t need to enter the password again as long as your editor is open. If you don’t want to prompt for a password when you reopen the editor then you need to add the following key-value pair in the sftp.json file.

{
    ...
    ...
    "password": "password_here"
}

Other Features Provided by Extension

This extension also provides a Remote Explorer feature where you can see the 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 the command palette and type ‘Sync’, it will give you 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.

I hope you may learn basics about using sftp extension in Visual Studio Code. I would like to hear your thoughts and suggestions in the comment section below.

Related Articles

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

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

  1. I have created a local virtual machine using vagrant for SFTP connection i use
    username: vagrant
    for password : using a key file which of .pem extension. How can i connect SFTP with extension using key file ?
    Please help

  2. Appreciate your help, Sajid.

    Could you provide insight into this error when using SFTP: Sync Both Directions?
    “Prohibited directory name”

    Output:
    https://cjcjr[.com]/sftp-sync.txt

    Uploading files works, as evidenced above, but using SFTP: Sync Both Directions has only populated folders locally from remote, not individual files.

  3. “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.

      1. Thank you.

        Do you know the remotePath for a WordPress installation? “/” simply shows a .ftpquota file within the FTP account username folder. /public_html/ does not work, nor the path of the FTP account.

          1. You can get this path from CPanel or hosting’s file manager. Pass the path upto your project root directory as remotePath.

          2. Thank you Sajid.

            When attempting to sync in both directions, or sync remote to local, could you provide insight into these errors?

            SFTP: Sync Both Directions:
            “Prohibited directory name”

            Output:
            https://cjcjr.com/sftp-sync.txt

            Don’t seem to have an issue uploading, but only the folders are synced using SFTP: Sync Both Directions, not the files themselves.

          3. Appreciate your help, Sajid.

            Could you provide insight into this error when using SFTP: Sync Both Directions?
            “Prohibited directory name”

            Output:
            https://cjcjr[.com]/sftp-sync.txt

            Uploading files works, as evidenced above, but using SFTP: Sync Both Directions has only populated folders locally from remote, not individual files.

  4. 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 *