2.6.4.2. Configuring FTP and SFTP Connection in VS Code

The VS Code editor has a native synchronization functionality with the server, but it is achieved by installing and configuring additional software on the server, which is not always possible. On our hosting, this type of synchronization will not work. Plugins can also be used 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.

Procedure

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").
  1. Click "Install" for the liximomo SFTP extension on project page in the VS Market or search for plugins in the app:
  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" — arbitrary connection name (you can create several connections and switch between them).
    • "protocol" — ftp.
    • "port" — 21.
    • "host" — FTP host.
    • "username" — FTP login.
    • "password" — FTP password.
    • "remotePath":
    • "uploadOnSave" — automatic upload of 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.
    • "name" — arbitrary connection name (you can create several connections and switch between them).
    • "protocol" — sftp.
    • "port" — 22.
    • "host" — SSH host.
    • "username" — SSH login.
    • "password" — SSH password.
    • "remotePath" — path in the form /home/user/example.com/www/, where user — hosting account name, а example.com/www — site directory.
    • "uploadOnSave" — automatic upload of 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.

Video

Content