How to use FTP Simple in Visual Studio Code

Before we start, make sure that you have your FTP settings ready. If you’re looking at this, then you probably already know how to set up an FTP account. Let’s get started.

Installing FTP Simple Extension

The first thing I’m going to do is open Visual Studio Code. On the left side, click on extensions, find “FTP Simple,” and install it. Once FTP Simple is installed, it will be in your enabled extensions. You can explore some of the settings and options, but I’ll show you the basics.

Configuring FTP Simple

Press F1 on your keyboard, look for FTP Simple, and type “config.” This will open the ftp-simple.json file, which is the settings file for your FTP. This works just like a JSON file. You can set up multiple websites by copying the existing configuration, adding a comma, and setting up another website. For this tutorial, I’ll set up one website.

For the name, choose anything you like. My website is called “Ruddy the Brand.” The hostname will be ftp.ready.com because this website is under this domain name. The port is 21. Enter your username and password. You can change the path where you want the files to be saved. If you leave the path to the default one, the actual files won’t be saved permanently; they will be temporary.

Set “auto save” to true so that when you hit Ctrl+S, it saves the file without the annoying confirm box popping up. Save the configuration file.

Connecting to the Server

To connect your website, open a new terminal, and under output, click on FTP Simple under task. This will show us if we have any errors or if we have connected successfully to the server. Press F1, type FTP Simple, and look for “remote directory open to workspace.” Select your website, press Enter for the current directory, and it will start downloading remote info.

Uploading Files and Making Changes

In your project folder, you might only have a logo, an index file, and an htaccess file. Open your index.html file to see your current website. If you change the background color to white and the text color to black, save the file, and refresh the website, you will see the changes.

If you add text like “Hi,” save it, and refresh the browser, the text will appear on the website. You can also drag files into your project. For example, if you paste a new image file, change the image source in your HTML to match the new file name, save it, and refresh the website, the new image will be uploaded.

Managing Temporary Files

It’s important to manage your temporary files, especially if you’re sharing a computer. After finishing your work, you should close the FTP connection. Press F1, type FTP Simple, and select “close FTP connections.” This ensures that your session is closed securely.

Conclusion

Make sure to remove any temporary files if you don’t need them. This is everything for this tutorial. I hope you learned something.