# VS Code SFTP to cPanel

This guide covers the "Best Practice" setup for managing cPanel/FTP connections in VS Code. It keeps your **credentials global** (on your local machine) and your **project rules local** (in your code folder), ensuring you never accidentally leak a password.

---

## Part 1: Global Setup (The "Keyring")

We store the sensitive login details in your Windows User Profile. This stays on your machine and is never shared with your project.

1. Open VS Code.
2. Press **`Ctrl + Shift + P`** to open the Command Palette.
3. Type **"user settings json"** and select **Preferences: Open User Settings (JSON)**.
4. Paste the following block into your settings (ensure it's inside the main `{}` braces).

```json
"remotefs.remote": {
    "PROFILE_NAME": {
        "scheme": "ftp",
        "host": "YOUR_HOST",
        "username": "YOUR_USERNAME",
        "password": "YOUR_PASSWORD",
        "port": 21
    }
}

```

* **Scheme:** Use `ftp` (or `sftp` if your host enables SSH later).
* **Password:** This is the only place you will ever type this password.

---

## Part 2: Project Setup (The "Rules")

This file tells VS Code *which* global login to use and *what* files to ignore. Create this inside your project folder at `.vscode/sftp.json`.

```json
{
    "remote": "PROFILE_NAME",
    "name": "ANY_NAME_HERE",
    "protocol": "ftp",
    "port": 21,
    "uploadOnSave": true,
    "syncMode": "full",
    "remotePath": "/",
    "ignore": [
        ""
    ]
}

```

* **remote:** Must match the name you chose in Part 1 exactly.
* **name:** Required for the VS Code UI to display the connection.
* **ignore:** Critical for preventing VS Code from uploading your local config files or Git history to the live site.

---

## Part 3: The Security Safety Net

To ensure your project folder remains clean, create or update your `.gitignore` file in the project root:

1. Open your `.gitignore` file.
2. Add this line: `.vscode/sftp.json`
* **Why?** Even though the file no longer contains your password, it’s still good practice to keep server paths and connection nicknames out of public repositories.

---

## Part 4: Workflow & Verification

Once configured, here is how you use it:

* **Automatic Upload:** Simply save any file (`Ctrl + S`), and you will see a progress bar at the bottom of VS Code uploading it to the server.
* **Manual Sync:** Right-click a file or folder in the sidebar and select **SFTP: Upload** or **SFTP: Download**.
* **The Safety Check:** Before a major change, right-click the root folder and select **SFTP: Diff**. This opens a side-by-side view comparing your local code to what is currently live on the server.

### Troubleshooting Tips

* **Connection Errors:** Check the **Output** tab in VS Code and select **sftp** from the dropdown. It will tell you if the login failed or if the port was blocked.
* **Schema Errors:** If you see "Matches multiple schemas," ignore it or ensure `remote` is at the top of your `sftp.json`. It is a visual bug in the extension and won't break the functionality.

---

**Now that the setup is complete, would you like me to help you create a separate "Staging" profile in your global settings for testing changes before they go live?**

[[guides/staging-profile-vs-code-sftp|Staging Profile]]