2.6.4.2. Configuring FTP and SFTP Connection in VS Code

The VS Code editor has native functionality for synchronizing with the server, but it is achieved by installing and configuring additional software on the server, which is not always possible. We cannot use this type of synchronization on our hosting. You can also use plugins to synchronize data with the server, for example, one of the most popular FTP/ Sftp plugins is liximomo SFTP... Plugin documentation is available in English at GitHub.

Important points:

  • The plugin uses the currently open project to synchronize with the server connected to it. Multiple connections should be created for multiple projects.
  • If an error occurs when modifying files "Unable to make changes in read-only editor", click in the editor with the right mouse button and activate the change in the local environment by clicking on "Edit in local" ("Local editing").

Before connecting

Make sure the following requirements are met:

  • The IP from which the connection will be made has been added to the list of allowed in FTP security settings or in SSH security settings, depending on the choice of the connection method.
  • At least 15-30 minutes have passed since the IP was added to the allowed list.
  1. On project page in the VS Market store or in the search for plugins in the application, click "Install" for the liximomo SFTP extension:
  2. In the application, press the key combination Ctrl+Shift+P for Windows / Linux, Cmd+Shift+P for macOS and enter SFTP: configand then press Enter... After completing these steps, a configuration file will open, in which you need to specify the appropriate settings:
    [
      {
        "name": "connection1",
        "protocol": "sftp",
        "port": 22,
        "host": "host",
        "username": "username",
        "password": "password",
        "remotePath": "/home/user/example.com/www/",
        "uploadOnSave": true,
        "ignore": [
            ".vscode",
        ]
      }
    ]
    • "name" — specify the name of the connected server, it is used to create a set of available connections that you can switch between.
    • "protocol" — the protocol used for connection, you can specify FTP or SFTP, depending on the selected one, you need to specify various settings below.
    • "port" — port:
      • For FTP — specify 21.
      • For SFTP - specify 22.
    • "host" — specify host from FTP connection data or SSH (they are identical).
    • "username" — Username:
    • "password" — password:
    • "remotePath" — full path to the site directory:
      • For FTP::
        • Or specify / - if you need to get directly to access directory user FTP.
        • Or specify the rest of the path from access directory user FTP to the desired subdirectory - if you need to go not directly to the access directory, but to its subdirectory.
      • For SFTP — specify the path as /home/user/example.com/www/, where user thisis title hosting account, and example.com/www thisis site directory.
    • "uploadOnSave" — is responsible for automatically uploading files to the server when saving changes.
    • "ignore" — a list of files or directories that will be ignored when uploading the entire project to the server.
  3. Save the changes to the config file. After that, VS Code will try to connect to the server several times. Connection status information will be displayed in the lower left corner.
Content