- You don’t even need to install the language package (PHP, Node.js, Go, etc) and all other tools locally on your host system, you only need to have the VS Code app (or even Free/Libre Open Source VS Codium app).
- You'll got a native app experience with local graphical interface, but all operations are performed inside the container.
- You'll use for development the same versions of language compiler (php or other) and tools (composer, phpcs and others) as installed in the container without any additional actions on the local system.
- You can use totally different environments per each project (different composer versions, php versions, other tools) without any tricks on your local system.
- You'll always have a native terminal console from the container, without needing to launch proxy commands like
ddev composer installand
- You can even connect to any remote computer (eg VPS in some cloud environment) using SSH and attach VS Code to it’s containers from your local machine with the same performance of the UI like working with local project! More info is here.
Launch a container with the needed environment on your local machine or on any remote server. For PHP development that tools can be useful: DDEV, Lando, for other languages - search suitable containers on Docker Hub.
- Install the VS Code from https://code.visualstudio.com/download
- Launch the VS Code and install the Visual Studio Code Remote Development Extension Pack.
- Click on the “Remote Explorer” icon on left panel, choose “Containers” from the top dropdown.
- See the list of active Docker containers, right click on
ddev-projectname-webcontainer, choose “Attach to Container”.
- Wait several seconds while VS Code will download and deploy the server-side component of VS Code into the container (”Downloading VS Code Server” message), and that’s all!
Additional configuration tips for DDEV:
- To fix the XDebug connection to VS Code inside the container you need to redirect xdebug target to localhost via creating a php configuration file
mkdir .ddev/php; echo "xdebug.client_host=127.0.0.1" > ./.ddev/php/xdebug-localhost.ini; ddev restart; ddev xdebug enable
- To use VS Code as the default editor - launch in Terminal:
sudo apt install curl -y; export DDEV_NO_INSTRUMENTATION=true; curl -s -L https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh | bash
4. Create a Drupal project and install tools into the container (drush, phpcs, phpcbf, phpunit):
mkdir drupal; cd drupal; ddev config --project-type=drupal9 --docroot=web --create-docroot --xdebug-enabled; mkdir .ddev/php; echo "xdebug.client_host=127.0.0.1" > ./.ddev/php/xdebug-localhost.ini; ddev start; ddev composer create "drupal/recommended-project"; ddev composer require --dev -W drush/drush drupal/coder drupal/core-dev; ddev exec drush site:install --account-name=admin --account-pass=admin; echo "Open site at: https://drupal.ddev.site"
5. Start coding!