Visual Studio Code – Web Development Add-ons

Hey guys in this video we will be looking at installing Visual Studio code which will serve as our development environment for our PHP web application development. Now Visual Studio code is a very open, very flexible, ie it serves as a basic text editor that is capable of being extended to basically whatever you want whether you want Python, you want C sharp, or in our situation, we want PHP. So I can just browse to the website, which is queued up Visual Studio COMM And then you’ll see that the download button is right there but it is also multi platform, so you can access it for Mac OS and Linux if needs be. But I will just proceed with the Windows installation. Now you can go ahead and accept the license agreement and it’s a pretty straightforward installation. You can do Go ahead and click Next. And you can take if you want the desktop icon. And I will just actually just take all of these options. And go ahead and click Next to make sure that it’s fully integrated with our environment. And we go ahead with the installation. At the end of this installation process, we can just go ahead and click Finish while leaving the launch Visual Studio Code option open. Now we will be exposed to Visual Studio code as or ID. As you can see, it’s pretty basic, there is nothing flashy about it because really, it’s like a bare bones text editor, we can actually just open up a new file, and we just type in text. We can type in anything. And then when we need to save the file then we can determine what kind of file it is that we want to see whether it’s a text file, a c file, and you can see that it has called support for quite a few files with PHP being no exception. So what I’m going to do here is actually open our sites that we started building do recall that we created a folder called new site. And we had a file, index dot php. And so what I’m going to do is go ahead and open it by going to File, and we can open folder and then browse to the folder. I have it here in my favorites, but I’ll just take the long route for your benefit. So it’s this PC, Windows XAMPP HD docs, and then we find it so when we get to the point where we have multiple applications in or HD docs, then we just select the application by folder, in this case, new site, and then we can select folder. And I’m not going to save any changes made to this untitled file, and we see kind of refreshed itself. And then we get a folder structure here in the Explorer pane. So new site only has one file and we see it gets a little PHP elephant looking emblem. So it has a contextual icons based on the file type, it will give you a different icon. So if I put in an index dot HTML page for argument’s sake, and I’ll do that again. Let me just do that over. Sorry. So let’s create a new file. using Visual Studio code, we can just go ahead and click this icon right here. This is new file, we can create a new folder essentially using this explorer pane we can manage the whole folder and file structure of any site that we wish to manage using this tool, so I can just go ahead and create a new file and I’m going to call it a boat dot php. And you can see based on the file extension, that This icon is changing. So this is the generic icon. If I say HTML, it changes accordingly. If I say C, or H, if I say C is it C sharp, so based on what file type it is, it will morph accordingly. And so I typed in a boat dot php. And you may see some, some error messages coming up along the way. But essentially, we can modify and customize Visual Studio code to our development needs. And that’s what we’re about to do. Now, since it is bare bones out of the box, what we want to do is make sure that we have all of the tools we need for PHP development. So I can just go ahead and click on this icon which says extensions. And already it is recommending a bunch of extensions to me because it is contextually recognizing that I might be doing PHP development based On the files that I have open, so I can actually go ahead and install all of these, the IntelliSense will allow us to to autocomplete our coding phrases. So just install that, we’ll go ahead and install IntelliSense. So everything that has been recommended, installed, so Visual Studio code is actually also open source. And they have a very active community where they allow you to create your own plugins, and upload to and share with the rest of the world. Now, some of these installations might fail and complain that they can’t find the PHP, environment variable or whatever. So because everything was set up inside of the XAMPP folder, it may not have been made public to the rest of your computer. So we’re just going to go ahead and go to Settings. So we can File and then Preferences and settings. And from here we see a bunch of cool features, we have an autosave delay, we also have auto save, so I like the auto save. So I’m just going to change it to after delay and the the delay is about one second. And we can customize how we want it to look from here. But what I want to look for is the PHP settings. I just typed PHP here. And it will kind of filter out all of the PHP related options and the one that I want is the executable path. So I’ll just edit in settings dot JSON. So now that we’re in the settings dot JSON, we can go ahead and type PHP dot validate dot executable path and we can just finish with that and we will have to type in the path relative to our installation. So recall that our PHP would have been installed with some sort of Windows XAMPP folder, and then we go into PHP folder, then we need to point so the PHP dot exe file here, so we can actually just take that path as it is written right there. And then we go back over to our JSON, and then we open quotation mark, and paste that path, but then we just switch these slashes and then he says slash php.xc. Alright, so having done that, if you are successful, you notice that the warnings would stop coming up, I’m still getting one warning for PHP, CS. And if I double click on this and go to manage the extension, then you’d see where it’s sitting suggesting that you use in composer to install it, and they give you the composer command to run relative to your project. I’m not quite ready to go there just yet. So I’m actually just going to go ahead and in the extensions pane, just disable this extension so that it will stop, you know, badgering me. And then you will see a reload required, so we can just reload Visual Studio code. And that extension would be kind of disabled and in the background. Now, please note that not all the extensions are completely free, as you see here that Intel defense is actually asking for key. So we can, you know, by the process of elimination to that one Oh, because I don’t want you to have to go and spend any money. So I’m just going to go ahead and install this one and reload Visual Studio Code once again. And so we’re left with two very useful and very free or at no additional cost two extensions that can be used to help us develop PHP. So I’m going to go back to the Explorer pane where I have my index file where I just printed hello world simply, and by about page and just so that we can see how our autocomplete works. in PHP. We have a tab where we have our angle brackets, question mark, and the words PHP. And then we close that using the question mark and I will go bracket and then I can see something like echo and some string. And the part way to do that would have been hello world. Alright, so this is how you would print something in PHP. I’m not quite ready to start with PHP, but I’m just showing you how that IntelliSense really works, where it kind of suggests to me what I may want to type and kind of gives me an explanation as to what this command will do. Now quickly, I just remember that there is another environment variable that we need to set. And that is the executable path. So if I go back to settings, which again go to File preferences and settings, and I filter on PHP, then I will see that I have the validate executable path and I just have the executable path. So actually set validate executable path, I need to just set the executable path. So in settings, I’m just going to click on the edit in settings dot JSON real quickly, and I’m just going to remove that line. So this is where we left off. In the next line. After putting a comma, I’m going to see open quotation marks and PHP and the new c dot executable path. And pretty much it’s the same path because it’s the same PHP that we’re working with. And then we can deceive that if you don’t already have autosave enabled and that should clear up Some things and that is pretty much what we need to do to install our editor for our PHP web application development. If you have any questions or suggestions, feel free to drop me a line. But that concludes this video. And when we come back, we will be looking at installing or setting up GitHub and GitHub account and pushing this project to GitHub for the first time.