Visual Studio Code is popular among 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. In addition to this, you can install extensions to perform different kinds of tasks. 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 called sftp. It’s a developer-friendly extension that makes our development work of file handling much easy.
Using this extension, you can transfer files on the server within the VS code itself. It is an alternative to third-party software like FileZilla, WinSCP, etc.
Some of the useful features of sftp extension 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
To use sftp extension, you must have a Visual Studio Code installed on your system. For installation of the extension, 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.
From the list, choose the extension developed by Natizyskunk. Click on the install button next to the extension. It will install the extension globally on your system.
How to Use sftp Extension in VS Code
Upon installing the extension, let’s see how to use it. Open your project in the VS Code 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.
It will open the sftp.json file in the editor. You will get the something like below content in the sftp.json file.
{
"name": "My Server",
"host": "localhost",
"protocol": "sftp",
"port": 22,
"username": "username",
"remotePath": "/",
"uploadOnSave": false,
"useTempFile": false,
"openSsh": false
}Fill in the details like protocol, host, username, remotePath, etc. The Port is set 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 upon saving it. While using the extension, make sure your local project and remote project have the same files and folder structure.
The 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 up a sftp.json file.
Note that you didn’t enter your password yet. Extension prompt for a password the 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.
Add the password and hit Enter. The sftp extension saved your password safely and now you don’t need to enter it again as long as your editor is open. If you don’t want to prompt for a password when you reopen the editor, add the following key-value pair in the sftp.json file.
{
...
...
"password": "password_here"
}More Features of sftp Extension
This extension also provides a Remote Explorer feature where you can see the file and directory structure of your remote server.
Another cool feature 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 the basics about using sftp extension in Visual Studio Code. Read more about sftp extension in their documentation.
Related Articles
- How to Use FTP/SFTP Package with Sublime Text
- How to Upload Images to another server through FTP in Laravel
- Upload Files to Amazon S3 using AWS PHP SDK
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.
Thanks
Seems nice but no support for SSH key auth?? Many servers nowadays aren’t built with password authentication anymore.
Don’t you need the id_rsa key file, or the *.ppk to use SFTP? I need that with Filezilla
So far I can’t login with VS Code + SFTP.
I would also appreciate an update to this article covering the use of SSH keys.
Nice Article thanks…
How do I set up config SFTP for a subdomain?
Thank you for this nice article, I tried to search for Remote Control in VS Code website but did not find an answer.
Thank you for excellent info
Nice and helpful post for me……. Thank you so much for sharing.
hello is it possible to use this extension and use sync vscode extension to share and sync ftp account ?
Thank you, usefull for me.
thank you so much
Thanks for all the information
This is a fantastic blog.
This extension is as crappy as all the others purporting to implement an “SFTP upload on save” functionality. I can’t even get it to connect to a server that doesn’t allow passwords, only keys. How hard can it be to solve this as well as the SFTP plugin for Sublime Text?
I agree!
Thanks for the heads up. Most editors that telly on extensions developed, potentially randomly abandoned, by third party developers, for this kind of functionality, are a half arsed solution, unfortunately. As Save to Remote (or whatever you want to call it) is intrinsic to my workflow, editors like Atom that are just a bunch of features arbitrarily chosen, relying on extensions for the rest, are dodgy as buggery.
I tried Atom and it didn’t have SFTP support so I search for an extension and it turns half a dozen results leaving me no idea at all what state they are in, how well supported they will be, etc.
Developers who have not caved into the build a server on my own machine, develop there, mentality are being screwed by the authors of these Electron + extensions editors, unfortunately. Which is why I stick to the one-man , long term effort of RJ TextEd. It’s been a rocky road at times, particularly with SFTP support when libraries get updated or whatnot. Presently there still nice-to-have basics that have not been applied to SFTP functionality, but exist with local saving. But overall it’s more complete for my purposes than any other editor I’m aware of
Very nice post and helpful information
Hi,
when i type ‘sftp’ in the extension search field,
it says ‘no extension found’.
(Running Code OSS on Manjaro Linux
Same here, did you found a solution ?
I was using Vscodium (the “opensource Vscode”) and had a similar issue
Check the file `product.json in your Vscodium config folder. It’s set up by default to use [open-vsx.org](https://open-vsx.org/) as extension marketplace.
Here is how it should look like after:
“extensionsGallery”: {
“serviceUrl”: “https://marketplace.visualstudio.com/_apis/public/gallery”,
“itemUrl”: “https://marketplace.visualstudio.com/items”
},
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
How can I upload only the files which are present in a git commit
Can I edit the remote files?
Very good!
thank you very nice website article
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.
“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.
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.
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.
Nor “/home/username/public_html/”
You can get this path from CPanel or hosting’s file manager. Pass the path upto your project root directory as remotePath.
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.
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.
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.
insert
“password”: “YOURPASSWORDHERE”,
in the JSON array. It can be stored that way.
Can you explain these please? Thanks a lot!
Under the username in the sftp.json file, simply add a “password” key and provide the value.