VS Code SFTP

You can define multiple environments (like dev and prod) within a single sftp.json file using the profiles key. This allows you to switch between different remote hosts and paths easily.

Important: The context and watcher keys are only available at the root level of the configuration and do not apply to individual profiles.

To switch between profiles, use the command SFTP: Set Profile from the Command Palette.

{
  "username": "username",
  "password": "password",
  "remotePath": "/remote/workspace/a",
  "watcher": {
    "files": "dist/*.{js,css}",
    "autoUpload": false,
    "autoDelete": false
  },
  "profiles": {
    "dev": {
      "host": "dev-host",
      "remotePath": "/dev",
      "uploadOnSave": true
    },
    "prod": {
      "host": "prod-host",
      "remotePath": "/prod"
    }
  },
  "defaultProfile": "dev"
}

You can connect to a target server through one or more proxy (hop) servers using the SSH protocol.

Note: Variable substitution is not supported in hop configurations.

Single Hop (local -> hop -> target)

Define the primary connection details (the hop) at the root, and the target server details inside the hop object.

Multiple Hop (local -> hopa -> hopb -> target)

Use an array for the hop key to define a chain of servers.

// Single Hop Example
{
  "name": "target",
  "remotePath": "/path/in/target",
  "host": "hopHost",
  "username": "hopUsername",
  "privateKeyPath": "/Users/localUser/.ssh/id_rsa",
  "hop": {
    "host": "targetHost",
    "username": "targetUsername",
    "privateKeyPath": "/Users/hopUser/.ssh/id_rsa"
  }
}

To attempt uploading files with root privileges, you can add the following parameter to your sftp.json configuration. Note that this is a workaround and may not work for all environments.

"sshCustomParams": "sudo su -;"

Configurations for the VSCode-SFTP extension are stored in your project's working directory under ../.vscode/sftp.json.

You can quickly open the configuration file within VS Code by pressing CTRL + Shift + P and searching for the command SFTP: Config.

You can achieve automatic synchronization (including deleting extraneous files from the destination) by using the watcher and syncOption properties. This is useful for keeping a server in sync with local Git branch changes.

Note: If watcher.autoUpload is set to true and watcher.files is set to **/*, you should set uploadOnSave to false to avoid conflicts.

{
  "name": "My Server",
  "host": "<host_ip_address>",
  "protocol": "sftp",
  "port": 22,
  "username": "user1",
  "remotePath": "/folder1/folder2/folder3",
  "uploadOnSave": false,
  "watcher": {
    "files": "**/*",
    "autoUpload": true,
    "autoDelete": true
  },
  "syncOption": {
    "delete": true
  }
}

To set up a sync connection, follow these steps:

1. Open a local directory in VS Code.
2. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and run SFTP: config.
3. This creates a .vscode/sftp.json file. Edit this file with your remote server details.

Note: If you omit the password field, you will be prompted for it during sync operations. Special characters like backslashes must be escaped with a backslash.

{
    "name": "Profile Name",
    "host": "name_of_remote_host",
    "protocol": "ftp",
    "port": 21,
    "secure": true,
    "username": "username",
    "remotePath": "/public_html/project",
    "password": "password",
    "uploadOnSave": false
}

You can modify SFTP settings through the standard VS Code settings interface:

• Windows/Linux: File --> Preferences --> Settings
• macOS: Code --> Preferences --> Settings

The Remote Explorer allows you to browse files on the remote server directly within VS Code.

• To open: Run the command View: Show SFTP or click the SFTP icon in the Activity Bar.
• Viewing files: You can view file contents directly in the explorer. To edit a remote file locally, run the command SFTP: Edit in Local.
• Bulk actions: You can select multiple files or folders using Ctrl or Shift to perform bulk upload or download operations.
• Ordering: You can control the position of the Remote Explorer in your sidebar by setting the remoteExplorer.order parameter in sftp.json (default is 0).

{
  "remoteExplorer": {
    "order": 1
  }
}

If you are using ProFTPD and cannot see hidden files (dotfiles) in the VS Code remote explorer, you must modify your server's proftpd.conf file.

Locate the ListOptions parameter and change its value from "-l" to "-la" within the <Global> section.

#Global settings
<Global>
[...]
ListOptions 　"-la"
[...]
</Global>

You can install the extension using two methods. It is highly recommended to uninstall any existing version from @liximomo before proceeding to avoid conflicts.

Method 1: VS Code Marketplace (Recommended)

1. Open the Extensions view (Ctrl + Shift + X).
2. Uninstall the existing sftp extension by @liximomo.
3. Search for and install Natizyskunk.sftp from the Marketplace.

Method 2: Manual VSIX Installation

1. Open the Extensions view (Ctrl + Shift + X).
2. Uninstall the existing sftp extension by @liximomo.
3. Click the ellipsis (...) in the Extensions view and select Install from VSIX....
4. Select your downloaded .vsix file and reload VS Code.

To upload the contents of a local directory to a remote path without creating the local directory itself on the remote, set the context property to ./[your-folder-name] (e.g., ./build).

{
  "name": "My Server",
  "host": "<host_ip_address>",
  "protocol": "sftp",
  "port": 22,
  "username": "user1",
  "remotePath": "/folder1/folder2/folder3",
  "context": "./build",
  "uploadOnSave": false,
  "watcher": {
    "files": "*.{js,html}",
    "autoUpload": true,
    "autoDelete": false
  }
}