Configuring Visual Studio Code for Remote editing with Drupal
This post describes how to configure Microsoft Visual Studio Code with Remote FS for remote editing of Drupal projects. It also contains an example workspace settings file for Drupal.
SFTP connection information
- Install Remote FS
- Open User Settings (Windows/Linux - File > Preferences > Settings; macOS - Code > Preferences > Settings)
- Add config settings to settings.json for this extension
- Warning: this only works with RSA private keys. As of this writing, Remote FS does not support ED25519 private keys either directly or via PuTTY Agent.
{
"remotefs.remote": {
"your-web-folder-name": {
"scheme": "sftp",
"host": "example.com",
"username": "username",
"agent": "pageant",
"rootPath": "/example/path/"
}
}
}
PuTTY agent (pageant) is only available on Windows. For MacOS, you must specify the path to the private key. Set passphrase to true to have the UI prompt for they key passphrase.
{
"remotefs.remote": {
"your-web-folder-name": {
"scheme": "sftp",
"host": "example.com",
"username": "username",
"privateKeyPath": "/Users/xx/.ssh/id_rsa",
"passphrase": true,
"rootPath": "/example/path/"
}
}
}
To open remote folders, use Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac to open command palette and select Remote FS: Add Folder to Workspace then select the desired folder, which will appear in your workspace file browser.
Drupal Workspace settings
Workspace settings override user settings. If you have workspace settings configured, add/change them to include:
{
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.formatOnPaste": true,
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.eol": "\n",
}
Useful Extensions for Drupal
Special thanks to my coworker Brandi for compiling this list!