VS Code Development Containers and workspaces are powerful new development tools that enable developers to share consistent development environments and reduce the time of installing tooling and bugs related to tooling.
This repository will demonstrate using a development container for building a custom WordPress theme and plugin. The development container has PHP IntelliSense and debugging enables. These things take some time to set up manually, so a container like this makes things very quick.
- Install the Remote - Containers extension (identifier
ms-vscode-remote.remote-containers). - Create a
.envfile based on the.env.template. - Open the command window and select Rebuild and Reopen in Container.
- You will now find yourself in the container with WordPress installed in the
htmlfolder. - Go to http://localhost:8000 in your browser to access the WordPress installation
- Go to http://localhost:8080 in your browser to access the PHP MyAdmin.
- We use a
docker-compose.ymlto define the container and map our plugins, themes, and development files into the container. You may usegitin the development container as you would on your local computer. - A devcontainer.json file controls which user, directory, and extensions are installed in our container.
- This tutorial uses the official WordPress docker image. This image isn't constructed for development, so we use a custom Dockerfile to add a few tools and a non-root user.
- Install the Xdebug helper browser extension.
- Start the
Listen for XDebuglaunch configuration.
- Set a breakpoint in your source code.
- Set the PHP page in your browser to debug using the
Xdebug helperextension. - Refresh the page, and VS Code should break in your code.
- See all development containers at the VS Code GitHub repository.
- See the latest JetBrains IDE Fleet (in private preview), which will be a competitor in this realm.
- See GitHub Codespaces, built on top of development containers.