VS Code Code Editor

SFTP Set Up

There are many benefits in switching to VS Code but the biggest improvement is the SFTP integration. A more robust solution in comparison to Sublime without the need to open all compiled files or the need to close/reopen when switching remote paths. SFTP for VS Code offers the ability to setup profiles for different remote paths and an easy switching method when required to sync files in multiple locations.

Creating a new SFTP connection is straight-forward and easy but requires a few steps to ensure a secure connection. First, you’ll need to add an SFTP extension. While there are many different extensions we will be focusing on using natizyskunk SFTP/FTP extension for Visual Studio Code for our example. To begin you’ll need to download and install the extension

1. In VS Code, navigate to the Extensions panel and search for “SFTP” then select the natizyskunk version.
2. Open or create the folder you wish to sync with the remote server
3. Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on a Mac to open the command palette, run SFTP: config command.
4. A basic configuration file will appear named sftp.json under the .vscode/ directory. Edit the parameters to match your setup.

For detailed usage on using natizyskunk SFTP please visit the extension wiki.

SFTP Configurations

A simple setup to get you coding immediately.

{
    "name": "CONFIG_NAME",
    "host": "NAME_OF_REMOTE_HOST",
    "protocol": "sftp",
    "port": 22,
    "username": "USERNAME",
    "remotePath": "/var/www/sandboxes/SANDBOX_NAME/current/wp-content/themes/THEME_NAME",
    "password": "PASSWORD",
    "uploadOnSave": true,
    "watcher": {
        "files": "**/*.{js,css,map,php}",
        "autoUpload": true,
        "autoDelete": false
    },
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store",
        "node_modules",
        "sftp.json",
        ".github",
        "sass-cache",
        "css_dev",
        "js_dev"
    ]
}

You should NEVER include your password in the SFTP configuration file and is strongly recommended to edit before continuing. To capitalize on using SSH and obscure your password make sure to follow the instructions on using the agent setting indicate the path to ssh-agent’s UNIX socket for ssh-agent-based user authentication.

SSH Key and Agent Setup for VS Code

A better, safer setup to get you coding like a boss.

In the following configuration we’ll setup a file that uses SSH authentication, creates multiple remote server profiles and watch all relevant file changes.

You’ll also need to have a SSH key and add it to the dev servers to make a connection and authenticate. If you haven’t already setup a SSH key please refer to Github’s Generating a new SSH key and adding it to the ssh-agent instructions.

When adding the SSH key to your local SSH agent using macOS Sierra 10.12.2 or later, you’ll need to add/modify your ~/.ssh/config file to automatically load keys into the ssh-agent and store passphrases in your keychain.

1. In a new OS Finder/File Explorer window, enable access to Hidden Files:
   • Mac OS X: CMD + SHIFT + .
   • Windows 10: ALT + H to access the “View” tab, and an additional H.
   • Windows 11: ALT + V to access the “View” tab, and an additional H.
2. Navigate to the ~/.ssh/config file directory using Mac OS X: CMD + SHIFT + G or Windows: WINDOWS KEY + R).
3. Open the config file with your code editor(in this case, VS Code) and add AddKeysToAgent yes to resemble:

Host *
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_rsa

The following instructions assume the key files are named id_rsa and id_rsa.pub however, instructions are the same for id_ed25519 and id_ed25519.pub pairs.

1. Using Terminal: Install key on dev servers ssh-copy-id -i ~/.ssh/id_rsa.pub yourBU-Username@ist-wp-app-dv01.bu.edu, replacing yourBU-Username with yours.
2. Configure and save your SFTP.json file using the following configuration or one customized to your environment and liking. The important settings revolve around the agent and defaultProfile strings.

{
    "name": "CONFIG_NAME",
    "protocol": "sftp",
    "port": 22,
    "username": "USERNAME",
    "agent": "$SSH_AUTH_SOCK",
    "watcher": {
        "files": "**/*.{js,css,map,php}",
        "autoUpload": true,
        "autoDelete": false
    },
    "profiles": {
        "PROFILE1_NAME": {
            "host": "ist-wp-app-dv01.bu.edu",
            "remotePath": "/var/www/sandboxes/SANDBOX1_NAME/current/wp-content/themes/THEME_NAME",
            "uploadOnSave": true
        },
        "PROFILE2_NAME": {
            "host": "ist-wp-app-dv01.bu.edu",
            "remotePath": "/var/www/sandboxes/SANDBOX2_NAME/current/wp-content/themes/THEME_NAME",
            "uploadOnSave": true
        }
    },
    "defaultProfile": "DEFAULT_PROFILE_NAME",
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store",
        "node_modules",
        "sftp.json",
        ".github",
        "sass-cache",
        "css_dev",
        "js_dev"
    ]
}

Now open the SFTP Explorer and you should see your remote repository and branches.