Introduction
If you use Visual Studio Code and DDEV, there's a new extension that may increase your efficiency. The DDEV Manager extension provides a user interface within Visual Studio Code for just about every conceivable DDEV command. As I am a user of both tools, and I often teach and present on the topic of maximizing one's efficiency related to Drupal development when using DDEV and Visual Studio Code, a thorough review of this new extension was a no-brainer for me.
Installation
Installation of the extension is typical of any other Visual Studio Code extension - from the "Extensions" sidebar, search for "DDEV manager" and then click to install. No restart of Visual Studio Code is necessary. Upon successful installation, the DDEV icon will be present in the sidebar.
Basic functionality
The default view of the DDEV Manager extension is a list of all DDEV projects on the machine. The counter-intuitive thing about it is that if Visual Studio Code is already open to one of the listed projects, its entry on the list isn't highlighted. In fact, from this default view, any DDEV project on the machine can be started. But, there's an icon at the top of the sidebar window that provides the ability to toggle between "All DDEV projects" and "Workspace projects"; I think the latter should be the default. I opened a feature request for this, but it was quickly rejected ☹️. However, there is a "DDEV: Show Projects List" setting in the Visual Studio Code configuration (via the "Code | Settings" menu) that allows the default to be changed.
Each entry in the list has options to start, stop, restart, rename, configure, delete, launch restart, and even a button to open an ssh connection to the DDEV web container. In addition, the contextual menu (see image) provides access to virtually all project-related DDEV commands. Granted, these are all things that basic DDEV commands do, but it is rather nice to have them all represented in the UI. Most of the options work the way you would expect. For example:
- Configure opens the .ddev/config.yaml file in Visual Studio Code
- XDebug Enable and XDebug Disable provide feedback in the form of a standard Visual Studio Code notification.
- Create Snapshot provides you the ability to name the snapshot in the form of a standard Visual Studio Code popup dialog.
One standout, in my opinion, is the Add Services option. It provides a popup dialog listing all of the available DDEV addons. I really like this feature, as discovering these addons is a relatively new feature in DDEV and I think this will really provide a lot of value to the DDEV community. For example, did you know that you could add a Solr or PDFreactor service to DDEV with a single command? Well, now you can do it with a couple of clicks - fantastic!
Clicking the angle bracket to the left of each project name in the interface provides an overview of the current status of the project. A nice surprise was the ability to modify the version of PHP and/or NodeJS used in the DDEV web container via a standard Visual Studio Code popup dialog (see image).
This detailed view of the DDEV project also provides nice touches like buttons to ssh into the project's various service containers, the ability to open the project directory in the OS's native file explorer, and the ability to open the MailHog interface in a browser.
How does this compare with the PhpStorm DDEV plugin?
The DDEV Integration plugin for PhpStorm offers similar functionality, but it is more focused on only the currently opened project. It also includes super-useful CLI integration so that tools like phpcs and PhpStan can be run inside the DDEV web container with their results exposed to the PhpStorm UI. This is not a feature that the DDEV Manager extension provides.
Summary
Who should use this extension? If you use DDEV and Visual Studio Code, this seems like a no-brainer especially if you enjoy your user interfaces. But, there is one caveat: if you connect to the DDEV web container via the Visual Studio Code Dev Containers extension, then the DDEV Manager extension is irrelevant for your use case.
The developer, Biati Digital, acknowledges that this is a new project and bug reports and feature requests are welcome in the issue queue.
Note: there is an older, seemingly no-longer-maintained DDEV-related extension available for Visual Studio Code called "ddev". At the current time, this extension is not recommended for use.