Skip to content

Visual Studio Code

On Tap Cloud DX supports remote development using VS Code.

Requirements

The following extensions are required:

For information about how to install extensions from the Extension Marketplace, please review this documentation.

Connecting to your Cloud DX Server

  1. Open a new window in VS Code...

  2. Select the "Connect to Host" option...

  3. Click on the "+ Add New SSH Host..." option...

  4. Enter “ssh [email protected]” being sure to replace the “1.2.3.4” with the actual IP address of your Cloud DX Server (which can be found on your onboarding email)…

  5. Select the configuration file to use…

  6. You should see in the bottom right corner…

  7. Click the “Connect” button.

  8. A new window should open, and VS Code should connect to your Cloud DX Server.
  9. Because this is the first time this has been done, it will need to install the necessary software in your Cloud DX Server, and this can take a minute or so.
  10. When it has finished, the bottom left corner of your VS Code window will show the IP address, for example…

Configuring a project for Xdebug use

  1. You must insure that your project has a directory .vscode at the project root.
  2. Create a file .vscode/launch.json that contains the following content.. 
        {
        "version": "0.2.0",
        "configurations": [
            {
                "name": "Listen for Xdebug",
                "type": "php",
                "request": "launch",
                "port": 9003,
                "hostname": "172.17.0.1",
                "pathMappings": {
                    "/var/www/html": "${workspaceRoot}/"
                },
            }
        ]
    }

  3. You should then have something like this...

  4. Open your project's .dx directory from VS Code, and create a new directory named php.

  5. Create a new file .dx/php/vscode_remote.ini with the following content... 
        [PHP]
    xdebug.client_host=172.17.0.1
  6. Execute the command dx restart within your project directory.

Using Xdebug

  1. Inside your project directory, execute the command dx xdebug on.
  2. You can start debugging by using the menu option Run → Start Debugging (also available on the keyboard shortcut F5).
  3. Now insert a breakpoint somewhere, for example in pub/index.php... ... the orange bar shows you that debugging is enabled.
  4. Now load up the website in your web browser.
  5. You should now see the code breakpoint has been triggered...

Turning Xdebug off

Performance is affected whilst Xdebug is enabled. Therefore, it is good practice to disable it when you do not need to debug. You can do that by executing the command dx xdebug off.