How to Edit Website Files Using Visual Studio Code and FTP Simple

Introduction

Edit Website Files in VS Code Using FTP Simple , If your website is hosted on a VPS server and you want to directly edit your website’s code , Visual Studio Code (VS Code) combined with the FTP Simple extension is a perfect solution. With this method, you can open your website’s public_html folder directly in VS Code, make changes, and upload them to the server instantly with just a save.

In this guide, we’ll walk you through each step — from installing VS Code, configuring FTP Simple, and connecting to your server, to editing and saving files.

Step 1: Install Visual Studio Code

1. Go to → https://code.visualstudio.com/
2. Click the Download button and select the installer for your operating system.
3. Run the installer and click Next → Next → Install.
4. Once installed, open Visual Studio Code.

Step 2: Install FTP Simple Extension

1. Open VS Code.
2. Click on the Extensions icon in the left sidebar (four-square icon) or press Ctrl + Shift + X.
3. In the search bar, type FTP Simple.
4. Click Install on the FTP Simple extension.

Step 3: Configure Your FTP Connection

1. Press Ctrl + Shift + P to open the command palette.
2. Type FTP Simple: Config – FTP Connections and select it.
3. A JSON configuration file will open.
4. Enter your FTP details like this

jsonCopyEdit[
  {
    "name": "My Website",
    "host": "ftp.example.com",
    "port": 21,
    "type": "ftp",
    "username": "your-ftp-username",
    "password": "your-ftp-password",
    "path": "/",
    "secure": false
  }
]

💡 Tips:

• "path": "/" means you will directly connect to your public_html folder.
• You can find your FTP details in your hosting control panel under FTP Accounts.

Step 4: Connect to Your Server

1. Press Ctrl + Shift + P again.
2. Type FTP Simple: Remote Directory Open to Workspace.
3. Select your saved connection (e.g., My Website).
4. Your server’s public_html folder will now appear in VS Code’s left panel.

Step 5: Edit and Save Files

• Open any file, make your changes, and press Ctrl + S to save.
• If Auto Upload on Save is enabled, the file will automatically be updated on the server.

Enable Auto Upload on Save:

1. Press Ctrl + Shift + P.
2. Type FTP Simple: Toggle Auto Upload on Save and select it.
3. Now, every time you save, your changes will be uploaded instantly.

Conclusion

That’s it! You can now manage and edit your website files directly from VS Code without having to log in to cPanel’s file manager every time.

This method is beginner-friendly and can save you a lot of time if you already have basic knowledge of coding and FTP. With this setup, your productivity will instantly improve.