2.5.2.3.2. Configure FTP and SFTP connection in VS Code

Synchronization can be organized using specialized extensions, such as SFTP by Natizyskunk. A detailed description of the extension and its capabilities is available on GitHub.

1. Install the "SFTP" extension by Natizyskunk using the "Install" button on the marketplace page or via the extensions section in VS Code:
2. Open the extension configuration file — in the command palette, select "SFTP: Config" (the palette is opened with the shortcut Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS).
3. Specify the connection settings and save the changes:

   • FTP
   • SFTP (password)
   • SFTP (key)

   {
       "name": "example",
       "host": "example.ftp.tools",
       "protocol": "ftp",
       "port": 21,
       "username": "example_ftp",
       "password": "password",
       "remotePath": "/",
       "uploadOnSave": true,
       "ignore": [
           ".vscode"
       ]
   }

   Parameters:

   • name — arbitrary name of the connection.
   • host — FTP host.
   • username — FTP login.
   • password — FTP password.
   • remotePath — relative path from the FTP access directory to the desired directory. Examples:
     • / — direct access to the FTP access directory.
     • /path/to/dir — access to the subdirectory path/to/dir within the FTP access directory.
   • uploadOnSave — automatic synchronization when saving changes.
   • ignore — list of files and directories that will be ignored when uploading the project to the server.

   {
       "name": "example",
       "host": "example.ftp.tools",
       "protocol": "sftp",
       "port": 22,
       "username": "example",
       "password": "password",
       "remotePath": "/home/example/",
       "uploadOnSave": true
   }

   Parameters:

   • name — arbitrary name of the connection.
   • host — SSH host.
   • username — SSH login.
   • password — SSH password.
   • remotePath — absolute path from the root of the server's file system to the desired directory, where example is the hosting account name. Examples:
     • /home/example — access to the root directory of the hosting account.
     • /home/example/path/to/dir — access to the subdirectory path/to/dir within the hosting account.
   • uploadOnSave — automatic synchronization when saving changes.

   For more details on keys, see SSH keys and SSH key-based authentication.

   {
       "name": "example",
       "host": "example.ftp.tools",
       "protocol": "sftp",
       "port": 22,
       "username": "example",
       "privateKeyPath": "/path/to/id_rsa"
       "passphrase": true,
       "remotePath": "/home/example/",
       "uploadOnSave": true
   }

   Parameters:

   • name — arbitrary name of the connection.
   • host — SSH host.
   • username — SSH login.
   • privateKeyPath — path to the private key file on your device.
   • passphrase — used when the private key is encrypted with a passphrase:
     • true — passphrase will need to be entered each time you connect.
     • To avoid entering the passphrase each time you connect, you can specify the passphrase itself in double quotes instead of true.
     • If the private key is not encrypted with a passphrase, you can either leave true and just press Enter when prompted for the passphrase, or remove this line from the configuration.
   • remotePath — absolute path from the root of the server's file system to the desired directory, where example is the hosting account name. Examples:
     • /home/example — access to the root directory of the hosting account.
     • /home/example/path/to/dir — access to the subdirectory path/to/dir within the hosting account.
   • uploadOnSave — automatic synchronization when saving changes.
4. Connect to the server and download the contents of the directory from remotePath to the local device — in the command palette select "SFTP: Download Project" and the created connection.
5. Wait for the download to complete — the status is displayed in the lower left corner of VS Code.

Subsequently, after saving any changes in the local copy of the project, they will automatically synchronize with the server. Additionally, through the context menu in the file list, you can manually initiate synchronization in the desired direction.