Maximizing Visual Studio Code with DDEV for Drupal developers

Hey. Welcome everyone. So hopefully you're in the right place. I know there's a little, uh, issue with the the signs out front. Um, this is me. I've been around for a long time. Uh, co-founder of DrupalEasy.Com and rather than me telling you about me, I always like to ask ChatGPT, so I. I type this in this morning. So there. That's. See if you can figure out which where ChatGPT went wrong about me. Is it being a respected educator? Yeah. I don't think I've ever. I mean, sure, I go to the beach and stuff. I don't know where that came from. I mean, I do, I paddleboard, I'm lucky enough. I live in Florida and I live in a place. I love paddleboarding regularly. So I don't know, somehow I saw that and translated that into open water swimming. That was that was something. It's a lesser known fact. Yeah, yeah. I don't even know it. That's how. All right. So yeah. So real quick, um, uh, what I'm going to present today is just a very small slice of a bigger course that I teach called professional module development.

Um, it's 15 weeks, two half days a week, 90 hours of instruction. You can read the rest up here. Um, and actually in the middle of the semester right now, the next one starts in August. If you want to learn more about that or if you have any questions, I've got some handouts I can give you or you can talk to me anytime this week. And that's. That's that. All right, so what are we going to do today is more about it. It's more of a demo than an instruction. Um, but I will give you everything you need to reproduce what you're going to see. Um, so at the end of these slides, there'll be a URL and a QR code where you can get these slides because these slides have, um, other links to code snippets and configuration on, on GitHub snippets that you can just. Yes. But so we are going to focus today on kind of what's a best practice. Um, you know, good foundation for, for using Visual Studio Code with Drupal development, with an emphasis on easy access to our tools. You know, our coding standards, tools.

PHP stands as a static analysis tool for PHP Xdebug. And um, which 1 a.m. I missing? A unit test. Running unit test. Um, in addition, you know, there's a few other, um, extensions that I recommend that just kind of allow us to work faster and more efficiently. So this is the list of extensions that I always recommend as a good starting point on my machine. I've got a few others like to do lists and um, like the twig extension provides syntax highlighting and stuff. Um, but really, the thing that unlocks most of what I'm going to show you today. This remote explorer in depth containers. This allows us to connect Visual Studio code directly to our DDEV web container. So we're not looking at my machine. I have a mac. So when I open up VS code and connect to a project, I'm not looking at the files in the macOS file system. VS code is looking at the files directly in the web container. And that's the key. That's what unlocks all this rich integration between our tools and Visual Studio Code.

UI. Um, I'll just run down this list real quick. So other extensions that we're going to utilize today are PHP sniffer and Beautifier, which is kind of the the integration with PHP six, which, you know, our communities coding standards doc blocker, which, you know, it's kind of like a text expander allows us to write, um, documentation within our code for methods and classes and stuff like that. Uh PHPStan. Integration with PHPStan obviously Drupal Smart snippets, which is a great this is a thing that you that there is no equivalent in PHP storm. Um, I'll talk about that. PHP IntelliSense, which is the thing that indexes all of the PHP, and this kind of provides 80% of what PHP storm provides out of the box when it comes to like code navigation and quick access to a to one classes based class or something like that. A lot of autocomplete. Your, um, you know, when you're when you type a class name, you little arrow, it shows you the dropdown of all the available methods, all that's provided from PHP IntelliSense, uh, debug, which is our X debug integration and PHP Unit Test Explorer, which allows us to run unit tests right from Visual Studio Code.

UI. So it's not that I'm against the command line, I'm just not as fast on the command line as some folks. So I like to have everything in the UI where it's just there and. Um, and then kind of my pet peeve is if I don't see a developer using settings dot local dot PHP, either in their local environment, I'm like, what are you doing? Um, because I feel like you're working with one arm tied behind your back. All right. Prerequisites. So obviously DDEV in Visual Studio Code, if you want to duplicate what I'm doing, you know, a Drupal ten site up and running, um, you're going to need the Drupal core dev dependencies. Why? Because this is this is PHP. PHPStan PHP unit. So all these tools that we use as module and theme developers are part of the Drupal core dev dependencies. For some of the stuff. You're going to want comfort with the command line? Not too much. So a basic understanding of what a coding standard is right? In our community. When you write PHP code, indentations are two spaces, not one tab.

That's a two space width, not four spaces, but two spaces. And that's a very simple example of a coding standard. And then some knowledge of using accessible to understand like what is real time line by line debugging. So what I'm going to show you is just a baseline. This stuff, you know, you might want to tweak this depending on your own personal preferences. This stuff evolves over time as tools evolve and new extensions get written or new coding standards come out. Um, so this is, you know, a good place to start. So this is not the be all and end all. You know, I probably update, you know, my documentation for this stuff, you know, a couple of times a year. So don't you know, if you're watching this recording in 2026, something's probably changed. All right. So starting point, same list of things. Um and again so we're going to talk we're really going to focus on this remote explorer and dev containers. Um I will mention there is another extension called DDEV manager. Um, that was I forget the name of the organization that wrote it, but it's an extension for Visual Studio Code.

It's actually really good if you're using Remote Explorer and dev containers. Uh, the data, I'm going to mention it because it is really good. The DDEV manager extension basically gives you access to everything DDEV can do from the Visual Studio Code. UI. So if you want to add like a solar container, there's a DDEV get command that will give you a solar container type. Wait a couple of minutes or you know a minute and boom, you've got a DDEV solar container up and running. Uh, the DDEV manager extension. You know, it's just right from the UI, you can select which container or you know, which thing you want to get and it will add it. So it's really good for again, for those of you who aren't as comfortable on the command line. So I know I talked fast. I'm just like I said, I need to give me 45 minutes, so I'll take a breather here for a second. All right. So how does this work? Because if we're going to have Visual Studio Code talk directly to the web container. Our first stop can't be Visual Studio Code.

Like we need that web container up and running first before VS Code can connect to it. So normally what I do and I basically the only thing I have running on my machine right now is, uh, well, I mean, other than the web browser and stuff, I don't have a project running at all. I have a project set up on apologies to mid camp, but this is from Florida. Drupalcamp. Um, but I'm going to just come to my terminal and do a DDEV start. Um, I can't do this from within within VS code because I want to connect to this web container that is just now starting up. So this is really the only command I need to run from the terminal to get our container up and running. And now. I can fire up Visual Studio Code and I will make this bigger as we need it. Rearrange things real quick. All right. So. Oh, there we go. So the idea is that we want to, you know, connect VS Code directly to our web container. And the best analogy I have is the matrix, right? When you jack into the matrix, you're the world you're in.

You know, the dirty dark world that they live in with their spatial, their, you know, really called space shuttles, whatever they are. Um, that kind of goes away and then you're in the matrix. That's the way that's the analogy for Visual Studio Code. When we connect Visual Studio Code directly to the web container, Visual Studio Code no longer really knows about, in my case, Mac OS or windows or your host operating system, because it's frame of reference is now relative to that web container, which is really, like I said, it's the key to unlock everything. So instead of knowing kung fu now, it knows how to call the tools inside of the container. It knows how to call PHP unit, it knows how to call PHP us. So if we didn't have this, if we're in our project and we run and we want to run phpcs, we'd have to do either a DDEV SSH to bring us inside the container which we are there. And then then we have access to the phpcs right there. Or we'd have to go DDEV dot, which is equivalent of DDEV execute PHP and I'll just do another which php css.

Right. So from Mac OS, if we want to run Fpcs, we have to basically tell DDEV to run it for us, but we can't configure VS code to do this. We can't say hey vs code run Fpcs but before you run Fpcs, do a DDEV document like the extensions don't work that way. So we need to bypass macOS and Jack directly in. And the way we do that is through the Remote Explorer extension in VS code. So what is Remote Explorer do? Well, just Remote Explorer allows you to connect VS code to a remote machine via tunnel or via SSH. That's just remote explorer. If you have the dev containers extension. And by the way this is the most confusing part of the whole presentation, right? It's basically we need to tell VS code how to connect to our container. Hence the dev containers extension. So when we select that container which is already selected you can see the Visual Studio Code. Or rather the extension is saying hey, here are the Docker containers I see running on your machine right now. Well, the ones that are running are the ones that will play button and then it says sees these as well.

But this allows us it's kind of like we're just we're making a remote connection. It's not really remote because it's on the same machine, but it's kind of a remote connection. But we're talking to a different file system. So in our case we want to talk to the DDEV web container. You can do the exact same thing if you're using Lando. And I'm showing DDEV here because there's fewer steps in some of the stuff I'm going to show you. But if you're using Lando, you'll see your Lando container here. It's not the same. So with the.

>>:
Lando container, be the app server. Yes. The app server, yes. Where this is the web container. DDEV. There's the app container. Lined-up. Exactly. So now we're basically going to connect, um, to that web container. Before I do that though, I do want to let me just open up. Um. So it's. So notice when I'm just I'm on Mac OS and I'm looking at this folder in Mac OS, right. So that's the same. That's the equivalent of this VS code just shows everything as uppercase or something when I connect to the web container. We'll take a second but notice. Make this a bit wider. Yeah. It's long. So HTML that is the name of the directory. So inside of the web container, if you're using DDEV the project root is always that var slash dub dub dub slash HTML. That's this HTML. And the extension, you know basically gives you an excruciating detail. It's like having you on the head, hey, I'm connected to a Docker container here. You know, it even goes so far as to say, you know, which is this is branch or desktop over here.

That's what I use instead of Docker for Mac, but now. Visual Studio Code, it doesn't know anything about the macOS file system. Now it's looking directly at the container, and if it's looking at the container, I don't have to worry about typing this DDEV dot stuff to run commands, because as far as DDEV, as far as Visual Studio Studio is concerned, it's inside the container. So to run my tools, I just have to do. You know, I just have to call them. So, um, yes.

>>:
When you connect, what user are you instead of the container? Are you? I don't know the answer. I assume you're the default. I don't know the answer to that, actually. Yeah, let me put it this way. It's it's never been an issue getting access to what I type in. Who am I to find out? That's true. Yeah. Thank you. Marcie. You know. I thought you were going to sleep through this. Now you're like. You're very interesting sometimes. Sometimes, sir. I'm me. I don't know how this is. It's same here. Who owns the files in there? Is it? Oh yeah yeah yeah yeah.

>>:
I suppose there is a volume attached to the container with matter what it. Here. It was a well, in this case, the file. The file system is synced between macOS and the container. The only volume that DDEV does by default is for the database, the data, the database. So if I was to disconnect the sync, if I was to stop the sync in the docker syncing, then I would need a volume for my code base, otherwise that would disappear every time I did a. So one note. We're going to go through the extensions in a minute. Um, but there are a bunch of these extensions, PHP debug being one of them is that when you open up a new container for the first time, those extensions need to be installed inside the container as well. Some of the extensions can act globally. Drupal Smart Snippets is one of them that doesn't need to be installed in the container, but some of them do need to be installed in the container. Um, and you'll see a little blue button. I don't always get this depending on how often I get this done.

Um, but we'll see right now. So inside the container, let me make some room here. I'll make this bigger over here. So if we go to our extensions. So before we actually dive in, notice we've got zoom in. Three sections local installed. So these are the ones that are kind of installed in Visual Studio Code globally. So these work in Mac OS. You know I'm looking at Mac OS, um uh File System or DDEV. And then these are the extensions that are installed inside of the container. And normally, you know, the first time through just install everything globally, the way you install any other VS Code extension. And then the first time you open a container, you might have to come in here and let's see if I have any that are. Yeah, I don't have any that are marked with other blue button doc blocker. For some reason, almost every time you have to like click that and reload it for some reason, I don't know what the reason for that is. Um, but yeah, so we can you can see I have I do have GitHub copilot turned off because sometimes it's annoying.

Um, but PHP so x double dot blocker, intellisense sniffer and beautifier php spam, PHP unit test Explorer. So those are all ones that have to be installed inside the container. And then the other ones. Um, really? Yeah, that's pretty much it. So, um, you know, so remote explorer and dev containers, those are the two I mentioned. There's actually like in a, um, if you go to the marketplace for Visual Studio Code, there's actually a bundle. Um, it's all free. There's a bundle where you get this one, this one, this one and that one and one download. So that's why I have all four, um, Drupal smart snippets is a really cool. I'll show you a demo of that in a minute. One thing it does, like I said, I use I like to do lists and I think the one down there as well that I, there's probably a couple others down there. Yeah. Oh, there's the button right there. Right. So, like twig language two. It's not available in the container. Unless I hit this little button. Inconsistent stalling. I should do that.

And now it is available in the container. So just that easy to do that. Well. Any questions? So far so good. Yeah. Your Git workflow. Are you running? Get inside of the container or outside? Yeah. DDEV I believe Lando both come with Git inside the container. I'll be honest, I think Git for me, in my experience it's slower in the container than outside the container. So I generally just do all that through the terminal. But you can you can do it through VS Code. Terminal like on your on your host operating system. Yeah, yeah. But I mean there are definitely people who like to use the Git extension in VS code that works. I mean, nothing's stopping that from working, but both are available. They're both available. Yeah, exactly. All right. So in order for all of this stuff to work these extensions, we've got to configure some of them. So I do want to mention depending on how comfortable you are with VS code, you may or may not be aware that there's two levels of user settings. There's the user settings, which are kind of the global VS Code that are valid for all projects.

You open up the VS Code and then there's the per project settings which are called workspace settings. And I'm going to give you examples of of both that you can download and use at your own starting point, or merge my settings with your settings, and you'll see why in a moment. But generally what I do is I have stuff in my user settings that's, um, a lot of. A coding standard stuff so that VS Code automatically, you know, adheres to Drupal coding standards as much as possible. Um, and then fallback configuration because in our workspace settings, this is where I have things that are specific to how VS code run Fpc's how should it run PHPStan. How should it run PHP to do just basic PHP linting? Um, so in order to access these settings, you can absolutely, you know, do the normal, you know, command comma. Um, I actually find it much easier. VS Code has the I always forget what it's called the and I always forget command palette. There it is under view command palette. So it's command shift P on a mac command shift P.

It opens up this thing and this basically it's not a search of a code. It's basically the search of all the Visual Studio Code functionality, menu systems, all that stuff. So I actually find this a lot easier a lot of the time. Um, so if you just start typing settings and you can see it sorts by most recently used. So you see my top two right workspace settings and user settings. So the second one down is the global. The one that's currently highlighted is the per project. So if we open up here before we do that, let me I don't want to talk ahead of my slides as a promise. I'm going to do what I'm about to show you. You can you know, this is a GitHub snippet, I believe, um, and all of these links will be in the last slide. I'll leave that last slide up so you can get all this stuff, but we've got a copy of my user settings there. And I also have a copy of my workspace settings there. So I just opened my user settings. So let's just kind of again I'm not going to go line by line through this because that would be really boring.

But I will kind of just go section by section. You know, this first section is all about coding standard stuff. Um, and then file association. So the VS code knows to treat a file as a PHP file. Um, and then a couple sections here to exclude files from indexing and extensions. And this basically makes it so VS code isn't doing so much stuff in the background. We've got another section here, which is kind of again, a coding standard stuff and, you know, and the file stuff, new line stuff. And then I kind of wrote these so that the rest of these go section by section for different extensions. So this is a PHP Linton. You can see my default PHP path. The executable is this is Mac OS. It's a homebrew path. Notice it's grayed up. It's grayed out because my workspace settings are overriding this. So this is just a fallback for me. So I've got some doc blocker settings intellisense settings. And again this is all stuff that is it's set up to adhere to Drupal coding standards as much as possible.

Smart snippet. And then this stuff down here is just, you know, the font size because I'm presenting and stuff like that. So I don't even think this is going to download. So user settings just kind of good basic user settings. Now I will say there is a page I mentioned it somewhere in the slides. There is a page on Drupal.org for configuring Visual Studio Code for Drupal development. It's pretty good. I'm going to give it like a, B, a, b plus. Um, I've actually made some updates to it based on what I'm showing up here, but I feel like some of my stuff goes more. There's a little bit too far into the opinion side of things. So some of what you see up here is not on that page, but that page is also a really good place to start. That page is a lot more extensions and a lot more if this or that. Um, than than what I recommend. Um, but that's a good place to start if as well. So I do want to mention that. So that was the global settings. Now the workspace settings is much shorter. And let's spend a couple of minutes here.

So this is the this is I'm overriding this same setting that was in the global settings. And notice the path is different before the path. And macOS is like a homebrew path. This path where does that come from. Well if I'm inside of my dev container as I am here. And where's the PHP executable? It's at user bin php user bin php. Where is the executable of PHP six? Dub. Dub dub or dub dub dub HTML vendor bin Fpcs. So because we're jacked into the container now, we can use the pass inside the container. Now, it would be great if this all worked. If I didn't need I don't know if it'd be great, but if it didn't, if you weren't able to connect directly to the container, these paths would have to look something like. Well, they wouldn't really be paths, they'd be commands. They'd have to be DDEV dot. For us. And that's not a path that's planned. So the fact that we can connect directly the container, and that's the file system that VS Code is seeing. That's why we can configure this extension to run the proper version of PHP six php CBF.

It can use our php CSS coding standards. It can call PHPStan directly. It can call it can use our PHPStan configuration which is the Neon file. Yeah. Um.

>>:
In your experience of maybe showing people this, has these paths changed much between different people's locals there know if you're using DDEV. We're using DDEV. If you're using DDEV, unless you're doing something wacky with DDEV, these are the paths. If you're using Lando, the only difference in this file replace var dub dub dub HTML with app app. Right? The default project path and DDEV is. This the default project path and Lando is that search and replace. I mean it's like 6 or 7 lines there. All right. Yeah. So let's see this stuff in action. Right. So you got all that stuff configured. And by the way, here's something else in PHP. What am I I'm in VS code um developer reload window when we when something's going wonky in Drupal and like our local what do we do. What's the first thing we do? Rebuild caches. Right. This is the equivalent in VS code. If you've changed configuration recently, or if you've installed an extension and something's not right and you're not sure what this is like VS code rebuild caches, it basically just kind of resets itself.

And not that I needed to do it there, but I did want to I did want to mention it. So what does all this get you. So I've got this is um, uh, yes. This is a formatter plugin and a base class there from the serial contrib module, which I've been in a conversation with. We'll say, um, so I'm going to do I'm going to open up my command line. I'm going to go to the problems tab. So why? Why should you do everything I just showed you? Because you don't have to run PHPStan on the command line to get your report. You don't need to run PHP from the command line to get your report. Here's a PHPStan issue in this file that's showing up in the problems tab, and it's telling. We know it's from PHPStan and all the information is there. We can go to line 60. And you know even given you know I don't know about you guys, but these red squigglies are like the the red bubbles on my iPhone. Like I can't have red bubbles on my iPhone. I need to clear all that out. Same thing with the drug Squigglies. Um, if we have fix issues, let's just make something.

And you see how fast that happened. So there's a PHPStan issue this stuff having it available here, having these red squigglies here. If you're the type of person who likes to solve problems and wants to learn, this will just nudge you and poke you into being a better developer, right? Like, why is that red squiggle there? I want to fix it. And you know, your tools will bully you and train you into being a better developer. Um, I really like one thing. How many people use PHPStan on a regular basis? All right. You all should be using PHPStan on a regular basis because it will make you a better PHP developer. And the great thing about it is we're fpses you just say Fpses check my file and it will give you here's all, here's all the stuff you need to fix. Um, PHPStan is a little more gentle. There's ten levels, zero through nine. Start on level zero and it'll show you the stuff that's really wrong. And you will very quickly learn how to not make those mistakes. And then I guarantee if you do PHP development every day or a couple hours a day, within a week or two, you won't be making any level zero mistakes anymore.

Then you nudge it up to level one, then you nudge it up to level two and it's actually really easy to do that nudge. I'll show you real quick. There we go. I work on level five generally, and here's something that's going to make you feel really good. Anybody know where Drupal core is at as far as PHPStan? We're fighting another one.

>>:
Yeah. No, I think you may. Have achieved level one, and we might be fighting for level two right now. And it's not. There's there's bugs in it. It's just that PHPStan is a lot of PHPStan is about being a lot more specific with types PHPStan loosely typed PHPStan. Okay, you can be loosely typed, but at least tell me what type this thing should be. Right. And that's a lot of what PHPStan is. And that actually, um, when you can write PHP in a more strongly typed way, that allows your tool to give you more information, that allows your autocompletes for your method names and stuff to be more accurate. That allows you to write PHP code in a way that's going to lead to fewer bugs. So having these tools and that's, you know, one thing I really love about having these tools in VS code set up like this is they're just it's always there. Now this freaking bubble is like mocking me. It's like, dude 12 you suck, Mike, get on the job. You know, so I really I think this is really good. You know, anybody who really wants to improve their skills.

Um, uh, in PHP. All right. So we talked about that. So that's PHPStan Fpcs Drupal smart snippets. So this has a lot of autocomplete. It adds a lot of autocomplete stuff that's specific to Drupal. So I'll show you a couple of things. And the first thing I'm going to show you yes this is something you can get in Phpstorm I'll make this bigger so I can see what I'm looking at. Look for my dot module file. There it is. So we can do, uh, serial underscore. I don't want service. I can get past all this stuff. No. I'm sorry. I always get. Since I use both, I have to. There we go. So auto complete for all the the hooks. Now, this is not a dynamic list. It's not dynamic. Meaning if you had a if you have a contributed module to your project, it's not going to show you hooks from that contributed module. It's a static list for for Drupal core hooks. That's just the way Drupal Spark Snippets works. So that's a little buyer beware, but at least you don't have to run to API Drupal.org to find the hook or, you know, the arguments going in and it kind of it scaffolds it for you nicely.

So that's that's one thing it does. The other thing it does, if you are in a, um, a dot module file or a preprocessor preprocessor hook and a dot theme file, and you need access to a Drupal service, um, in a way that does not depend on dependency injection or does not require dependency injection. You can do that service and Drupal smarts that that's snippets to do list. Again it's static. So if you have a contributed module that provides a service, you won't see that in this list. But here are all the Drupal core services. And you click one. And it does a nice job because it gives you, you know, the doc block, it gives you your type hint. And it calls the static service class of those that service. So that's nice as well. And I don't think that this is available in PHP storm. But that's that's nice. But that's not the in my opinion the big deal thing with um, um, with Drupal smart snippets, the big deal thing. So we're going to go into review elements here. But I actually want a well I can do it.

It doesn't really matter. So how many people around and let's say legacy Drupal days Drupal seven inches the four days when you had to write a form for API. Remember that page on Drupal.org that shows you all the form API elements in a table and in your browser? You saw this much, but the table actually went way over here. But it was actually useful. It was ugly, but they said, okay, well I need this type of element. What are the what properties like that was helpful in modern Drupal? There's not really a page like that anymore, and it's kind of a pain to find. You know, I need an image button element, like what are the properties that I actually need to implement to get this? This is where Drupal Smart snippet shines. This is something that I haven't been able to figure out how to do in PHP storm, because you can just do a form and oh my gosh there. All right. There is an image button and boom, you know it just gives it I mean, this alone, you know, this is why I don't think Andy Bloom is here mid cap, but if you see any bloom you should find a meal because it does give a guarantee.

It saved me a few minutes you know that. Yeah. Yeah, yeah. And he's a very good maintainer of it. It stays up to date. Um, again it's statically, you know, every time there's a new release of Drupal core, he's got this little magic script he runs that updates the module with all of the form elements. It's not just form elements. It's, you know, for your front end developers out there, there's render elements, you know, and it just gives you I mean, it just gives you the doesn't give you all the properties because I'd be overkill. It gives you the the ones you probably need. Um, and there's also element all of those as well. So the Drupal smart snippets. I'm a big I'm a big fan. IntelliSense. This is kind of table stakes, right? If you use PHP storm, then you expect to be able to, you know, if I'm in here I'm like, hmm, does formatter base give me access to, you know, config factory? I'm not sure. Let me I'm holding down the command key. It becomes a link or I can right click go to definition.

This is from PHP IntelliSense. Well and boom, I'm in formatter base. So you don't have to go hunting for it. Right. Um, that's probably the thing I use most often, but it does stuff that you think is part of VS code, but it's actually coming from intellisense if we're inside of. No plaster. We can do this. Like this. This autocomplete list. These are actually all methods that are available specifically to this class. You know, and you know, some actually most of these are probably coming from formatter base in any of its, you know, parents. But you know, again it's kind of table stakes. But um, that's what intellisense brings to the table. And I will say just beware. There are a couple. Let's see if the internet is still intela. Yeah, there's also intellisense. This is the one that's bang New Bern. This is the one I recommend. There's an Intel center that used to be intellisense. One Intel. I thought there was a PHP intellisense. Maybe I'm. Well, there it is right there. Yeah, this one's not as good, I don't think.

I mean, no offense to Damien. Um, but I've tried both of them. I really like intellisense, and it's freemium. There's a paid version as well. I actually have the paid version for a while, but I don't. I looked one day and I wasn't using any of the paid features other than this case. He kind of overshot the mark because the free version is fantastic, so just make sure you grab the right one there. Um ba ba ba ba. All right. Pete, Pete. See, this is what I'm talking about. Time flies when I'm going. All right. Um, I'm not going to. I guess I can do a quick demo of this, so it's actually pretty easy to do. Um, x debug in VS code. Again, assuming you are using the PHP dot PHP debug extension and configuring it in VS code when you're jacked in to the container, you know what that means. If you don't have to worry about path mappings, path mappings are 90% of the time. The reason why x debug isn't working for you is because your path between the server and your local file system are not aligned, but when your server is your local file system, when we're jacked in there, the same files.

So you don't have to worry about path mapping. So it actually becomes a lot easier. Um, so there is a link to this in um, in the handout or in the slides, but you need a. Let me say here, let me update this. So we'll go to here. I'll just show you where this goes. Yeah. This is all you need for your X debug configuration. So here you know what I'm just going to start from scratch here because it's only going to take a minute. Let me delete this delete permanently. All right. So when you want to use X debug you have the extension installed. You come here and it basically says you got to open a file. And we're going to open up the index.php in a second. But we want to create a launch.json file. And this is basically us telling vs code where where's the debugging information coming from. So it's actually a pretty simple file. We're going to do PHP debugging and it'll give you all of this stuff by default. And you're looking at this going, oh my gosh, I've got I've got a headache looking at it, but just delete all of it and replace it with what I give you.

And that's the whole file right there. And it basically just says, you know, every time um, x divided or there's a request, you know, you launch the debugger, assuming that it's turned on. We'll see that in a minute. It's PHP, the debug information is coming from port 9003, which if you're up to date on Lando or DDEV, that's the default port. Notice there's no path mappings, no path mapping entry right here from Ray. And we've got some extra settings which I use, which I think are a good place to start. But that's really all you need. So you do that, you open up your terminal. And this is another bit that is easier and DDEV than it is in Lando. Um, but you can enable X debug when you're inside the container in DDEV with Enable extra mode. You can also do it from outside the container with DDEV x debug. I can't spell debug on, so DDEV gives you kind of both those little commands, but we enable x debug. So this is basically saying this is telling the server hey send out that stream of debugging information.

And then on the other side you have to tell VS Code, hey listen for that debugging information and to listen start debugging. And in VS code where I have my my configured, this will turn red. I see if you're using um I just saw it a Drupal new Jersey, one of our, one of our students that turned from black to blue where they were debugging, which I don't know what setting they have. There was some alternate color scheme, but the bottom bar should change colors. And the first time you do this I recommend going into index dot PHP. And then I even have a browser open I do. So we'll come here and we'll do FL, FL, DC. So I'll just hit the site and boom I'm debugging. Yeah. Does that work. For CLI tools as well. Like if you're debugging a custom Drush command. Yep. Yep. Because path mappings you don't have to worry about it. You just debug in the container and. Yeah. You know. When the, when the server that's sending out the debugging is looking at the same files as your IDE. Mhm. There's no path mapping.

Tests to you can step debugging the tests. Yes. Drush custom Drush commands tasks. And if you really want to get in the weeds and you've got some dependencies somewhere deep in your vendor directory, you know it'll work. So I want to be fair to PHP storm because I do use on a daily basis. Um, the actual debugging I think is better in PHP. Storm. I'll give you two reasons why. Um, I use this debug console a lot. So this debug console down here lets you write PHP. Um, it lets you write code to be executed, uh, as if you are at this point in your code scope. So I have access to my kernel down here so I can do like an A dollar kernel and it will show me basically showing me the same thing that's up here. Right. But I can also do stuff like, I don't know here what I can do really. Um, you can do an echo one plus one. I know that's kind of silly. Oh, well, I guess I can't do that print you can do. Yeah. Oh, print. Yeah. Print. Okay. There we go. Well, okay. So I don't know. Why, but one plus.

One equals one. Yeah, so I know. So I guess there's three things I like about PHP storm I think you get that right. Um, the PHP storm, this little, uh, line down here, you can expand and write multiple lines of code in PHP. Storm. That's one thing I really like. I end up doing that all the time. If I if I want to test the for each loop or something. The other thing about PHP storm does that vs code doesn't isn't. I kind of alluded to it, but if I type kernel and do that, I want autocomplete. I want to see what's available. PHP storm will show me an autocomplete in my debug console where vs code doesn't. So when I'm really needing like hardcore debugging, I will switch over to PHP storm for those two things. But is it the main thing that you would use Phpstorm for on a daily basis? You mentioned you switch back and forth. Yeah, the main thing. You know what it is. I um, when I'm starting a new project, I'll think about which of the two tools I haven't used more lately because I like to stay proficient in both.

Um, but if I happen to be in PHP store, and I know I've got to do like a big forum array or something, I'll switch over to VS code for an afternoon just to get all the Drupal smart snippet stuff, or vice versa. But in VS code, would there be a way to look at just the kernel methods? Not in here. So what I normally do is, you know, I come up here and I'll just go. I'll just put a temporary line of code in here. So the autocomplete works here. But I want it to work there. So one. Thing I like to do is move that control panel on the upper right hand corner over to listen to debug.

>>:
So that I know that I'm already in a session. I don't, you know. Oh yeah, that's actually not so. The thing that and this is kind of this is a problem. This is a mic problem for someone who uses both a lot there in PHP storm, there is a play button in the top bar that has nothing to do with X. It has to do with running tests. So my muscle memory a lot of times when I run, like when you're done x debugging, you want the page to run out. You come up here and hit play. I will hit that play button and PHP storm all the time when I'm at the button and suddenly I have a test being run like, oh shit, you know? So I always hit the the play button over here to start a place to start a session. It's like you already got one running. That's why I put that one. That's not a bad idea. Put it right there, huh? Now I don't have another one waiting. That's not a bad idea, because I have had. I played with putting this on different places, but I've never thought about putting it there. I might try that.

Yeah. You're welcome. Thank you. Michael. Aren't you glad I stayed awake? Yes. All right. Let me turn all that stuff off real quick. Control that. Disable. That's the bug. I know we're short on time, so if you have questions, shout them out. Um, I think we're almost done here. Oh, unit test explorer, I love this. Um, so this is the unit. This is the, uh. THP. Or is it? Oh, I'm in the wrong place. Get rid of that container. This is the unit test explorer extension. Now that provides the little flask down there. And. If you leave that blank up there, it's. Going to. Show you all tests in your code base. Core contrib custom. So what I normally do is if I'm working on a custom module, I'd actually. Cereal is the worst name for a module to test this with because it. Yeah. So that's why I had admin toolbar before admin toolbar. So this shows us all of the admin toolbar tests that are available. And currently this does require like what I haven't shown you today is you need a valid Fpcs configuration file in your project root.

You need a valid PHP unit dot XML file in your project root. If you're interested in doing the gory details of any of that, I am the full day workshop that Rizzo glowingly talked about this morning. I'm doing that on Friday, so if anyone wants the gory details about all this, that's what Friday is all about. Um, yeah. But now I don't have to open up the command line if I want to run this functional test, I just boom, hit that button and it runs. So. Little green check in the past or if they fail. So again, for me it's a time saver because my native tongue is not command line a more UI based. So I do like these tools that are, you know, easily accessible. All right, um. If you're not using settings dot local dot php shame, shame, and you should be using it on your local, don't commit it. Um, I mean, this has nothing to do with VS code. This is just a pet peeve of mine. So I'm trying to, you know, one class at a time and one group of people at a time. This will force all errors to the screen.

Under local. You will never get a white screen of death on your local, and it will turn off selected Drupal caches, which generally, unless you're testing, caching or writing something involving caching, you want them turned off on your local. Anyway, it does some other stuff as well, but do settings on dot local dot PHP. Yeah. So other. Extensions. Yeah I mentioned the first two. This is not Drupal documentation page I mentioned. It still mentions this empty index extension. I really need to go in edit this page. And if you need this if you can figure VS Code using the configuration I gave you, VS Code will do that for you. So it's one less extension you need. Um, every time I present this, I do mention the Composer extension, and I have every intention of trying it out. And I guarantee you, by 2 p.m. today, I will have forgotten all about it again. So if someone can remind me at some point, I will. I will try it out. Does anybody use any other VS code extensions that you love that you.

Yeah. That's right. Every time I ask that, I expect someone to have something that I never heard of. But like this a lot of times. So. All right. That's cool. Yeah, I don't know. I had that done. And then these slides. So this is if you want these slides with all the links and all that configuration and the list of extensions. There you go. That's the last slide. So normally I'm like ten minutes over on this session today I'm five minutes early. So any questions. I will say everything I've shown you you can do with Lando or DDEV, and you can configure PHP storm with Lando or DDEV to do similar. I will say the the trickiest combination is Lando and PHP storm, but you can get it all working. Um, and with a full day on Friday, we probably will depending on who's in the room. So yeah. Is your primary use case for this setup? And that they.

>>:
Actually have something. Yeah. Yeah, absolutely. Yeah. This is all independent of Git. This is not going to get in the way of Git or vice versa. I use this for contribution. I use this for clients. I use this for teaching. This is kind of my, my go to. Um, earlier this year I, you know, before let's say, um, this calendar year, um, I kind of had a I used to show a lot of this stuff installing Drupal coder kind of globally on your host operating system, and then you can kind of configure everything. So it still ran. Um, but that had a few more steps. And you weren't guaranteed to be using the same version of PHP on your host operating system as you are in your container. So that was like a weakness of it. And so earlier this year, I kind of said, you know what I don't use I don't use it that way myself ever. So, you know, I did in the past, but with, you know, especially the performance of DDEV these days is so is so good that you can do everything in the container. And it's almost like being data.

I mean, it's so it's so close in my machine is a it's an M1 Mac. I use rancher desktop instead of Docker for Mac. DDEV ships with mutagen enabled, which is just, you know, it just makes Docker fast. Anybody else. I was just going to say I use Remote Explorer a lot to like. SSH tunnel into servers, and it is basically using VS code as if I'm on my regular Mac, so I never have to worry about that. Right. You know, and your terminal loads your whatever you've got your set up. So tell us more about. So you are connecting directly to production servers and making changes there. Uh, yes. So like I'll say Git. And so. It's really the cowboy hat. But I can't so I do okay. Let's say you. Know, I'm in a pinch. You can absolutely do that. Yeah. Just rancher desktop. Require a like subscription or anything. Answer right now is open source. Um, I have a I've heard that it might go kind of similar to what Docker for Mac did, where it's free for certain use cases, but then the paid version I. I use DDEV.

With Colima and it's perfect. Yes. So I use the Colima for a long time as well. I ran into an issue doing a update in Colima once where I updated Colima, and then DDEV stopped working and I had to, you know, I worked with Randy, who's a maintainer of DDEV, and we found out, okay, well, that update of Colima changes configuration. So you had to get in there and and it was at that point. So okay. Well I don't want to at that point Colima sucked. But I'm like that shouldn't have happened. There should have been something in the readme for the update saying, hey, you know, watch out for this configuration change. Um, so when Randy, um, or the DDEV folks came out with announcements, say we are officially supporting Rancher Desktop and Orb Stack in addition to Colima and Docker for Mac. I said I want to I want to move away from Colima just because I, you know, it's open source. Maybe I'll go back someday, but it is. The performance of rancher is actually a little bit faster than Colima. Oh, really?

Just a little bit. I don't know, I probably wouldn't notice if someone swapped it in the middle of the night on me. Um, I can tell you both. They're both a lot faster than Docker for now, that's for sure. Anybody else? All right. Thank you.