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 useful 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 should have Visual Studio 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

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 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. We recommend keeping “uploadOnSave” value as false so the file will not upload automatically on save. While using the extension, 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 to 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 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 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 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.

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

  1. 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.

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

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