VSCode - The Complete Setup for PHP Development

today we're going to take fresh new installed vs code and convert it into best possible PHP working environment we're going to install a couple of useful extensions we're going to configure settings code Snippets keymap and shortcuts and we're going to install nice theme which is my personal preference [Music] hello everyone my name is zura and I am the code talk on this channel I share my 10 plus years of experience working as a professional software developer so if you are new here consider subscribing before we jump into video I want to ask you one small thing I have been working on this video for a few weeks researching extensions experimenting modifying and I spend a lot of time if this video is helpful for you please don't be lazy and click the like button because that's going to really Help The Help the YouTube algorithm to promote my video and suggest it to others let's start first installing basic extensions which are not necessarily connected to PHP but really useful one if you are working on PHP many people ask me which theme I use for vs code or which icon theme I use so let's go in the exchange extensions and I'm going to look for immunity material theme this is the first one okay this theme this is the theme I I use I'm going to click install by the way there is another theme which is called material theme simply material theme but this one material theme basically includes Community material theme as well as material theme icons however I don't want this material theme icons I want material icon theme so I'm going to click install right here and I'm going to set material icon theme as my icon theme if I go in the Explorer and let's open any folders basically I'm gonna open my PHP MVC framework and right here you see that the icons are already changed let's change the theme color theme and I generally choose Community material theme parlonide with high contrast so the theme is ready what next I'm going to install a live server the live server is really useful extension to easily serve your HTML CSS and JavaScript files today's sponsor is PHP tools for ES code extension the extension has several built-in features using which it stands out from any other extension for PHP the Creator's ultimate goal is to create a single extension for vs code that will be packed with every necessary feature a PHP developer might need besides the basic features like Auto completion code formatting code definitions or declarations code actions symbol search and many many others it already supports few unique features like built-in debugging support possibility to search for to those in entire project full customization for dark block elements for classes functions and pretty much for anything full unit testing support one of my favorite features is cold lens it helps to immediately see how many times your functions classes or properties are used and by clicking on it you can navigate to usages renaming refactoring you can rename your variables properties functions and classes and they will be renamed everywhere probably the best thing in this extension is that they have very strong support and development team they have dedicated form on which I posted my problems and as a fact they fixed the problem the next day they are using freemium pricing many features are free but some of them are paid you can have 30 days free trial for premium features and buy only after you make sure it's good enough for you use the coupon code zura to get 10 percent discount all right the next one I want to install is a Auto close tag this one is really handy as well it automatically closes HTML or XML ending tags the other one is auto rename this automatically renames the closing tag if you rename the opening tag okay the next one I want to mention is code spell checker this one basically will put an underline on your words that you have typo there and here and you can you can fix that let me open in this case um controller site controller and go in one of the one of the actions let's say right here and I'm going to declare a variable for example parallel access token so as you saw I made few mistakes right here and let's say this one to three I made a mistake right here it should be personal access token not parallel and it underlines right here so it tells you that there's a problem a known word pronoun and you have Quick Fix right here you can change this into Personnel or perms or whatever so it has a couple of options it has its own dictionary so I'm going to set this into a personal access token and the underline basically disappears also if you mix your writing style like this one is a camel case notation but if you miss and like the token is all lowercase then it also underlines right here but I'm going to change this into token and you see now the underline goes so basically this gives you a hint that you have something wrong and it forces you to start thinking about how you how to change that okay this is really handy another one is prettier the most popular formatting extension it supports most of the languages and if you want to support your HTML or css or JavaScript uh then this is the extension you should be using okay the next one is relatively new one but it got really popular and I I wanted to include in my video as well because it's a really good client rest client to work with API rapid without space API here it is okay this is Postman like rest client which gives you possibility to Define your requests let's click right here okay it gives you possible to Define your requests save the request to find of course headers and body and make the requests and also it gives the possibility to sign in and sync your requests across multiple devices and it finally gives you possible to generate your code snippet for your desired language okay which is I think uh like fantastic okay the other one is um to do highlight this is really small one but really useful to do highlight so let me install this and let's go in the site controller and I'm gonna let's delete this and I'm going to Define right here a single to do with color as you see it already highlighted uh right here so the studio highlight has two keywords to highlight one is to do and second is fix me and it gives you a highlighting in different styles the next one is dot EnV if you have dot en file in your project no matter if it's a PHP or node.js or python project then you must have this extension let's open my en file gives you syntax highlighting and if you have some comments right here then the comments are grayed out basically it gives you syntax highlighting on keys and values as well the next one is editor config the editor config is really a necessary file in your project if you don't know what is in it config check my video in which I explain what is editor config and configure the project to have the best editor config settings and I really recommend simply to have this extension the other one is code Runner the code Runner is one of the most popular extension over almost 15 million downloads and it gives you possibility to select piece of code and execute it immediately the next one is WSL so basically right now the I have the folder opened on Windows from Windows File system however now I'm going to open my vs code into WSL so I'm going to close this let's open Ubuntu here it is I'm going to navigate into www folder and right here I have a folder PHP MVC framework so I'm going to open this now we have opened this project from wso path uh but that's not uh that's not what we want we want to open vs code inside windows subsystem links by the way if you don't know how to set up a WSL on your windows with a Docker check my other video which describes everything like step-by-step instructions how to install Docker and WSL and Ubuntu and make your project up and running okay now let's go in the extensions and I'm going to install WSL so let's click right here and click install and now we have a few options right here we can get started with remote or we can open remote we also have possibility to reopen the same folder inside WSL in fact if we click the bottom left corner open remote window we can click reopen folder in WSL and I'm going to choose Ubuntu distro because I have my files and folders inside Ubuntu and this will open vs code inside WSL and now you see right here here we see WS Ubuntu and if we go in the extensions right now we see that we have locally installed 11 extensions but inside WSL Ubuntu we don't have anything in fact for some of the extensions we have to install inside WSL as well for example code Runner code spell checker and so on we have to install inside the WSL as well to be able to use them properly okay however I'm going to go back into um into file system without WSL now let me choose this folder and I'm going to install few PHP extensions right now quick pause right here the only thing I ask for is like subscribe and cheer but if you really love my content and want to do something even more check my donation pages patreon and buy me a coffee I really appreciate every single Cent you donate and it's going to give me much more motivation to keep creating free educational content I also created Discord server which is at the moment only available for my atriums so as soon as you become a patreon you will have access to the Discord server on which you can ask your questions post your problems and I will personally assist you there sorry for Interruption let's get back to the video there are two extensions for PHP in vs code which in my opinion are really useful and both of them have very similar features but they have some differences as well for example PHP intelligence which is a freemium extension it has couple of useful features inside free version and it has simultaneous inside premium the second one is PHP tools it has also very similar features like Auto completion code formatting go to definitions and declarations Etc but PHP tools has some of the great features which are not presented in PHP intelligence like integrated generics supports it has built-in debugging support PHP tools has also built-in unit testing support it has possibility to search todos inside the whole project and few few others uh PHP tools is slightly new extension it has like 400 000 downloads at the moment they also have like freemium pricing some of the features are free and some of them will be paid at the very moment while I'm doing the recording every feature basically is free but I think it's just a matter of days they will add restriction to some of the features inside the extension my recommendation is to have a look at both both are great both have a really useful features they are both are like more or less stable try both and then choose which one you prefer the downside of the PHP tools is that they their pricing model is slightly different compared to PHP intelligence they have annual subscriptions and PHP intelligence has like forever subscription once you buy it you don't have to pay uh for anything else so just try it install both uh I think both are great I'm going to install php2 and I'm gonna go with it and like configure a few things I'm going to mention that PHP tools comes with two more extensions so when you install PHP tools it's going to install composer extension as well as PHP profiler extension let me open composer Json composer Json and at the top right here we see install and update buttons and those were aided by the composer extension also if I start typing of the package name it starts suggesting me and on the left side it also shows me how many stars or downloads the package has so whenever you choose the package then when you start choosing the version It's Gonna also suggest your version it also shows you uh what is the version of the package you have installed locally this is really handy even if you choose PHP intelloffense I think you should install composer extension it's really handy okay now let's go in the customization I'm going to open settings and let's actually search for Doc block and right here we see uh possibilities we see settings to customize our doc block extensions uh for classes and functions and for pretty much anything so I'm going to copy the following code this piece of code and click editing settings and let's put this right here okay and I'm going to change the name to be the code holique a lowercase o and let's put comma right here and the copyright for the current year I'm going to save this and now let's open like login form by PHP class and let's move at the top and I'm going to delete this and let's create now generate dock block so I have to type slash and asterisk two times and it generates the code for me and we see that the authorized code how they can copyright is the current ER and we see some text which of course we can modify this dark block annotation basically works for functions as well as you see it identifies what type of result we return as well okay this works on classes and functions in pretty much for anything however this one to work we have to go to the settings and find an option format on type and make sure this setting is ticked because without that it's not going to Simply work okay when you type slash in asterisk two times it's not going to create that code code for you so you have to have these settings another really unique a unique feature for of PHP tools is that when we open the comment palette and try type search to do it's going to show us all the to-do's we have available so we can click on any of them and navigate there um again one great feature is that it reports all the problems we have inside the project like right here for example when I double click on this it opens the layout and it tells me that inside the layout you're using this keyword which probably is not the correct way of using that so it gives you reports your problems and you can basically have a look at the problems and maybe fix them okay so we have the extension which gives us like a code formatting and syntax highlighting and auto completion if I move up and remove all the usages for example and then scroll down we see that the classes are now on the line and I click on this and we see this bubble I click this bubble and we have quick fixes like and I can use which will add the use at the very top and I can create the whole namespace right here the fully qualified name right here you know or we can set this into um keyboard like I think by default it's control and comma we're gonna adjust the keyboard shortcuts as well so I think this extension is really cool and it has also renaming and refactoring so if I'll open login form and just click on this actually I already have that renamed so I rename this into login form and it's going to be renamed basically in every every place is where it is used like right here okay if I just rename this into my login form and then it's going to be renamed right here as well okay so we have like all in one extension at the moment which gives us exactly what we want so what should we do that do next so I recommend to install now PHP awesome Snippets extension and basically get used to this is the extension and get used to code Snippets because code Snippets boost your productivity okay get used to these ones create your own code Snippets then try to use your desired keyboard shortcuts create settings which are suitable for you and it's gonna move you shift you to a different level of coding and that can definitely speed up your productivity okay now let's open the same folder inside WSL so let's choose uh WSL path and let's let's reopen the same folder in WSL and basically the extension is what we have installed in vs code most of them we have to install in WSL as well so if we go in the extensions we see that we have 15 extensions installed locally most of them are General extensions for web developers and we have some of them for a PHP and as you can see let's have a look WS Ubuntu there are zero extensions installed in WS Ubuntu okay so we can go and click installing WSL buttons for those extensions so that them to be installed in WSL as well and we have the same experience in vs code in WSL as we haven't on local file system okay now since we have all the necessary extensions let's focus on creating our own code Snippets how to do that let's click on the settings and right here we have configure user Snippets I'm going click right here and I'm going to choose PHP and I'm going to click choose the PHP and right here I can configure my own code snippet uncomment this and let's write text here create VAR dump that's it the prefix which should trigger should be dump inside body I'm going to specify in Echo opening the pre-tag then right here we need the cursor we need for dump inside which we need cursor and then we're going to have another Echo with closing pre-tag okay and we can give it a description as well or down let's save this and now go in the site controller and I'm going to write dump and hit the enter and as you can see it created the following snippet with Echo pre and Vore dump okay I think that's this is really handy and I just show you how you can create your own code Snippets you can write them uh right here however speaking about code Snippets there is also one thing you should know we have just created a code snippet for uh PHP however if you have fresh new PHP file and I'm going to create test.php right here let's say we want to create the following code snippet okay if I just create the snippet in the PHP Json that's not going to Simply work we need to create a new Global code snippet and I'm going to call this PHP and I'm going to uncomment this code and right here I'm going to create a PHP Global and let's give it a scope to be PHP and I think that's it and the prefix Let It Be PHP if as simple as that so this is going to be the first line then we have right here another line which should be an empty and then another one right here okay and the cursor should be first cursor should be right here and second should be right here okay and let's give it also description PHP if so we save this now I'm going to type PHP if and it does not seem to be working I specified the scope to be PHP but I have to specify HTML as well because the scope inside the text PHP by default is HTML right I can write any kind of HTML I want right here so I think this scope is HTML so if I just type PHP if now it gives me the following suggestion if I hit enter it generates the following code for me so that's important thing you have to specify HTML right here the difference between the global snippet and the PHP is that this one has a scope automatically PHP okay that's why it didn't work first now let's talk about my vs code settings let's click on this gear icon and click on settings or control in comma and we have a bunch of settings like vs code comes with thousands probability of settings so I'm going to click this uh this icon which opens settings Json in which I already have configured my settings and let's go through this so basically we say that I use icon theme material icon theme this is my color theme and I'm disabling PHP suggest basic because if you're using any extension like PHP tools for example it gives its own suggestion and if you don't disable PHP basic PHP suggest basic you're going to have suggestion two times one which is basic suggestion and second from the extension so I disable that and I also disable the validation PHP validate enables it to false because again the extension which I'm using does the validation okay so for Emmett I exclude the following languages this is done this is aided by PHP tools um extension then editor format on type true so whenever I type I have to uh I I basically have to set this into true if I want a doc block to work perfectly in PHP tools and Explorer auto review is false this is my personal preference probably most of you won't like this and you want this to be true but generally when I have the Explorer opened and I'm navigating between pages I don't like the file to be revealed immediately okay according to my experience this is this is what I prefer and yeah as I said this is my personal preference and the explanation is that I had to work and I have to work on really large projects where I have in the folder I might have like uploaded files like hundreds of uploaded files and I'm copying the name of those uploaded files and putting them somewhere in the controller so as soon as I open the controller on the left side I have those uploaded files opened and whenever I activate the controller it just loses my focus and then I have to search scroll and search where my files are there because I have to click and copy and put this in the controller okay so that's why I prefer to manually reveal whenever I need okay and I can set this on my keyboard shortcut all right the next one is also my personal preference and that's workbench list open mode double click so that's also something you probably don't need and you want it to be on single click but again I'm used to IntelliJ products where I I open the files using double click yeah and uh yeah I simply want to uh when I click I want to select the file for renaming or for doing something I just want it to be open immediately okay don't hate me about this this is my personal preference the next one is editor Mouse Zoom wheel so that's something which doesn't come in vs code by default and I wish I wish it would come so whenever I click control and mouse Zoom I want the file to be zoomed in and zoomed out okay and by default it doesn't work like this okay the next one is quick suggestions and this is really handy by default the quick suggestions only supports in normal code so whenever I start typing in something like like for example I have a login form right here and I start typing login form and then it automatically suggests me everything but the quick suggestions doesn't work in comments and in strings and this is really handy okay sometimes when you start typing something as a string you want the suggestion to work as well so this is what it does and this one editor guides bricket peers this is by the way a slightly new feature and previously there was an extension um for this purpose and this highlights the opening and closing bracket so if I open my site controller again and I click this it matches the peers bracket peers and it highlights them all right the next one is minimap scale the minimap is the most useful thing uh and I really love and this is the mini map and I have the scaling set to 2 by default it is one if I change this into one you see that minimap actually reduces in size I prefer it to be larger okay and minimap show a slider always that indicates that the this is the slider which is always visible okay by default it is not visible until you Mouse over on the minimap but I prefer to always visible because whenever I have a large file I immediately see in which part of the file I am right now right now I am in the middle of the file and I immediately noticed that okay the next one is terminal integrated default window this git bash okay so the new terminal basically by default on Windows opens Powershell and the Powershell is not as powerful as git bash is and I preferred gig bash so I set this into git bash and by the way you can set this uh to git bash by clicking this arrow and then select default profile and choose the git Bash all right the next one is a default formatter and I basically set the default formatter to be something by the way this is this is not correct so that should be PHP tools uh devsense PHP tools vs code that should be the default formatter and uh if you uh use uh like PHP tools you set the default formation to be PHP tools if you are using um uh if you are using like PHP intelligence you can set the default for message to be PHP intelligent intellisense or I can even set the pre-tier where is prettier vs go to the default formatter however for PHP files I'm going to set the PHP tools to be the default parameter I think that's the most accurate way and these four settings are basically this one is for cursor blinking so if you notice that it fades out and then appears slightly that's the blinking if I just remove this line you see that cursor immediately blinks without animation and then we have the cursors tile to the line which is by default line as well but we have a couple of other options like block for example and now you see how cursor looks like and we have the format on Save I don't want the files to be formatted on Save again that's my personal preference because sometimes I have to work on a real large files which is unformatted and if I format then push there will be tons of changes in the merge request and this is something which I don't want and the line hates and it's 22 that's my personal preference if you increase this you're going to increase the line head between the lines as as simple as that all right that's my vs code settings now let's talk about my keyboard shortcuts let's open keyboard shortcuts and I'm going to open the Json file in which I already configured couple of shortcuts uh which is my personal preference you might have different shortcuts and if you have that's absolutely fine I'm just sharing what type of shortcuts I use the default shortcut for deleting line is Ctrl shift and K this is something I don't want so go in the keyboard shortcuts and I search for delete line and I set this into Ctrl and e as you see it right here and whenever you basically set a keyboard shortcut from here right click and change key bindings and you set control and E hit the enter it's going to automatically create a second object in this Json which will have a minus in the command so that basically means that Ctrl shift NK should not work when deleting lines anymore okay this is just removing disabling the default shortcut and this is just mine and I have control in D set to duplicate line down I have shift and by default that was uh shift alt and down to duplicate line down and that that was simply removed I hit Ctrl shift and down to move the arrow to move the line down and up just like this so I hit now Ctrl shift and arrow up and arrow down and the line is moved up and down okay and the default was alt and down and ALT and up and that was removed by vs code with the minus in front of the comment and Ctrl shift R up is obviously move line up and previously it was alt up and I have alt and enter insert inserted for Quick Fix so this is the default one for in jetbrands products if you want to for example import a file so if I have if I just remove login form from here and let's say that now I have an underline and I want to import these I'm going to hit alt and enter and then hit the entering menu immediately in the login form will be imported okay the default behavior is control and Dot on this which was removed and ALT and J I set these two match next selection for example if you go again in the site controller and I look for get method and I hit alt and J this will find a navigate method in this file and it will mark it as well now I have like few get methods and I have multiple courses as well and I can change all of them to whatever I want okay and the default behavior for this was Ctrl ND which was removed and I set Ctrl N1 to toggle the sidebar visibility the sidebar the left sidebar by default the default keyboard shortcut is Ctrl and B to open and close it I set it into controlling one and now using Ctrl N1 I can open and close the sidebar okay and right here each tab inside the sidebar has its own keyboard shortcut like Ctrl shift and E activates the Explorer Ctrl shift and if activates the search by default the version control system was set into Ctrl shift and G and this is my last keyword shortcut which I configured default was Ctrl shift and G and I change this into Ctrl shift and c and we now whenever I hit Ctrl shift and F this searches and the Ctrl shift and C opens the control Source control Version Control System Ctrl shift and D activates the debug Ctrl shift X activates the extensions and we have the remote Explorer and others which simply don't have the shortcuts I think the rapid API has the shortcut Ctrl shift and R alright so these are my keyboard shortcuts and one very very important thing because of which I really love vs code so save your extensions settings keyboard shortcuts in pretty much every kind of configuration into cloud and I'm gonna log in right now using GitHub so you basically click the user icon in the bottom left turn on settings sync then you will authorize using like Microsoft or GitHub and then it will be synchronized into your GitHub which is which is awesome generally you should do that you set up your extensions themes settings and everything once then log in and whenever you log in from another vs code from fresh new install vs code or from a new work machine that's going to be synchronized into your computer automatically alright guys if I miss any extension please let me know in comment section down below if the video is helpful please hit the like button and if you want to see more videos please hit the Subscribe button thanks for watching and I will see you in the next time

Channel: The Codeholic

Views: 36,510

Keywords: TheCodeholic, php, php tutorial, learn php, php vscode, php vscode setup, vscode setup for php, vscode extensions, vscode php extensions, vscode settings, thecodeholic vscode settings, thecodeholic vscode themese, the codeholic php, the codeholic php vscode setup, Best vscode settings, best vscode extensions, best vscode extensions for web developers, best vscode extensions for PHP, vscode user snippets, setup vscode for php, vscode php setup, best vscode extensions 2022

Id: 4zVObKFZ6fA

Length: 33min 59sec (2039 seconds)

Published: Mon Oct 03 2022