{"id":586,"date":"2024-04-09T16:14:14","date_gmt":"2024-04-09T20:14:14","guid":{"rendered":"https:\/\/sites.bu.edu\/marcom-team\/?page_id=586"},"modified":"2025-12-01T10:44:02","modified_gmt":"2025-12-01T15:44:02","slug":"vs-code","status":"publish","type":"page","link":"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/role-specific-info\/designers-developers\/dev-setup\/sftp-code-editors\/vs-code\/","title":{"rendered":"VS Code Code Editor"},"content":{"rendered":"

SFTP Set Up<\/h2>\n

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.<\/p>\n

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\u00a0SFTP\/FTP<\/strong> extension for Visual Studio Code for our example. To begin you’ll need to download and install the extension<\/p>\n

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

    For detailed usage on using natizyskunk<\/span> SFTP please visit the extension wiki<\/a>.<\/p>\n

    SFTP Configurations<\/h3>\n

    A simple setup to get you coding immediately.<\/p>\n

    {\r\n    \"name\": \"CONFIG_NAME\",\r\n    \"host\": \"NAME_OF_REMOTE_HOST\",\r\n    \"protocol\": \"sftp\",\r\n    \"port\": 22,\r\n    \"username\": \"USERNAME\",\r\n    \"remotePath\": \"\/var\/www\/sandboxes\/SANDBOX_NAME\/current\/wp-content\/themes\/THEME_NAME\",\r\n    \"password\": \"PASSWORD\",\r\n    \"uploadOnSave\": true,\r\n    \"watcher\": {\r\n        \"files\": \"**\/*.{js,css,map,php}\",\r\n        \"autoUpload\": true,\r\n        \"autoDelete\": false\r\n    },\r\n    \"ignore\": [\r\n        \".vscode\",\r\n        \".git\",\r\n        \".DS_Store\",\r\n        \"node_modules\",\r\n        \"sftp.json\",\r\n        \".github\",\r\n        \"sass-cache\",\r\n        \"css_dev\",\r\n        \"js_dev\"\r\n    ]\r\n}\r\n<\/code><\/pre>\n
    You should NEVER<\/strong> 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<\/code> setting indicate the path to ssh-agent’s UNIX socket for ssh-agent-based user authentication.<\/em><\/p>\n
    SSH Key and Agent Setup for VS Code<\/h2>\n
    A better, safer setup to get you coding like a boss.<\/strong><\/p>\n
    In the following configuration we’ll setup a file that uses SSH authentication, creates multiple remote server profiles and watch all relevant file changes.<\/p>\n
    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<\/a> instructions.<\/p>\n
    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<\/code> file to automatically load keys into the ssh-agent and store passphrases in your keychain.<\/em><\/p>\n
      \n
    1. In a new OS Finder\/File Explorer window, enable access to Hidden Files:\n