Setup VSCode for Laravel Development

what's up my friends my name is zura and I'm the code toic in this video I'm going to share my personal setup of vs code for Lal development I'm going to start with extensions and I'm going to split the extensions into three parts first I'm going to talk about must have extensions then I'm going to talk about good to have extensions and finally I'm going to talk about the extensions which you might find useful but I don't use and I'm going to also explain why I don't use these extensions after extensions I'm going to talk about settings then I'm going to talk about my personal live Snippets for PHP and LEL and finally I'm going to share my personal choice of color theme in the icon theme for vs code if you find this video useful please hit the like button and subscribe for more useful content like this and let's jump into the video here's my fresh installed vs code and I have Lal 11 project opened first of all I'm going to deactivate this show welcome page on Startup I don't want it to be opened then let's go into extensions and I'm going to search for PHP there are two main extensions when speaking about the PHP one of them is PHP allinone and second is PHP intelence they are very similar they have very similar features but my personal preference is PHP allinone you can install whichever you want you can even try to install both of them but again my personal preference is PHP Allin one so I'm going to install this once this extension is installed we can check in the installed extensions and we're going to see actually Four extensions the composer extension was installed as a dependent of the PHP extension there's PHP profiler and Intel PHP which is AI based autoc completion for your vs code this is very intelligent one so this is one reason why I prefer PHP allinone versus PHP intelence it comes with other extensions which are very helpful the next extension in must have list is laravel blade Snippets this comes with the blade Snippets and syntax highlighting and now if we open blade PHP file the syntax is highlighted and that happens because of this Lal blade snippet extension the next extension I recommend is Lal blade formater this is also must have extension because without this you won't be able to format your blade files nicely once the extension is installed I'm going to open welcome blade PHP which has a minified single line blade HTML inside as you see everything is on a single line so I'm going to right click and format document and it's going to nicely format the entire blade file which is awesome the next must have extension is laral extra intelligence this provides an extra intelligence to your Lal project it gives you autoc completion for the road names for the views for the variables and couple of other places so I also think that this is a must have extension for your Lal setup let's move into good to have extensions category and the first one is LEL goto view before I install the extension we can see that whenever I hit the control on my keyboard and mouse over on this welcome view it doesn't do anything once we install this LEL go to view then open this welcome controller and hit control on the keyboard we see that uh here is an underline and when we click Mouse click on this it's going to open this view as well although you can live without that extension it is very helpful and it's going to save you a lot of time when building larel projects the next good to have extension is laravel goto components it works very similar to laravel goto View but in this case we can hit control on the keyboard and with mouse we can follow the components for example I'm going to open navigation blade PHP file and here we are using couple of components for example ex application logo and I hit control on my keyboard and using Mouse I can follow this component and see its content or I can check another component the disadvantage of this is that it cannot identify if there is a component class and if the component path is basically changed changed so if we go in the app view app layout component and we can see that the view is changed it's not the default one it it's coming from the layouts. up PHP we can open this through control and mouse but this comes from the go to view extension however if we again open this dashboard blade we cannot follow this um X up layout component that is the disadvantage but in most cases your components will be located in the Cor folder in the components folder and you can follow them using control and mouse the next extension is prettier which is probably the most downloaded extension of all time um we're going to install that we're going to need this for CSS and JavaScript not specifically for HTML or PHP but for CSS and JavaScript the next extension is auto rename tag that is very useful extension whenever we change the opening HTML tag this extension will change closing HTML tag as well in the vs code there's new setting which is called linked editing and that kind of works in HTML files but according to my experience that linked editing doesn't work nicely on the blade files for example if I open welcome blade right now and if I change this div opening tag or let's change this right here into nav for example the closing is also changed right here without that specific extension that doesn't work like this another good to have extension is highlight matching tag whenever we open any blade file and we hit on the opening tag it's going to highlight its closing matching tag as well without this extension in the latest version of vs code this highlights but again in Blade file sometimes I came across to issues when I had I couldn't identify what was the closing tag and this extension doesn't hurt anything it helps in most cases so I also recommend to have that extension it is not must have but it's good to have the next extension is called intelligence for CSS class names in HTML if you are going to work in Blade you're going to probably write some CSS classes there and that extension is very helpful and it gives you this intellisense autoc completion when working in the blade files so I'm going to need that as well LEL by default has a support of talin CSS and I'm going to install Talan CSS extension as well to have these Talan CSS classes aut to completion in the blade files next I'm going to install editor config for a vs code again this is good to have because I generally try to respect the editor config file located in the project if you scroll down below we're going to see right here uh editor config file if you don't know what is editor config you can check my specific video about this I have a dedicated video regarding editor config and I'm going to install this as well now let's talk about the extensions which you might find useful but I don't use and I'm going to explain why first of all I'm going to install this Lal Arc as an extension and I'm going to explain why I'm not going to use this extension that extension helps you to work with the Artisan for this we're going to hit contrl and P then I'm going to type artisan and then we're going to type make whatever make controller for example then we have to provide the controller name for example user controller then it asks me what type of controller I want I want the resource controller then it asks me another question then I have to provide my model and so on so that's too many questions for me I generally prefer to bring up the terminal and type a single comment by myself I know exactly what I'm going to type PHP design make controller D- resource D- mod equals user whatever and I'm going to hit the enter once and it's going to generate the controller and everything what I need I don't like that many questions that's why I'm not going to probably use these extensions I generally prefer to interact with the terminal through PHP Artisan comment by myself but I see for beginners this is actually very useful if you have hard time remembering all the parameters pH HP uh artisan make controller has for example you can use this extension and it's going to ask you all the questions and it's going to make sure that you don't make any mistakes so you might find it useful but I'm not going to use it the next extension from the category you might find it useful but I'm not going to use is laravel Snippets so that provides a couple of prefixes for the snippet autoc completion like for array for out for cach for Road and there are many such type of things you can check its read me but I found in practice that this is not actually very convenient again this is my personal preference you might absolutely find it useful so I recommend to check it out by yourself read it's read me and everything but I think I'm not going to use this extension because um I generally prefer to have my own live Snippets for these sort of that things the last extension is LEL blade wrapper and what does that do for example in Blade whenever I select some code then I can hit control shift and T and it's going to give me suggestion of uh blade directives I can choose if for example and I'm going to hit the enter and it's going to wrap with if condition my selected HTML that's pretty useful actually not very bad but uh generally I prefer to do the following I can select my code I can cut that then I can use this add symbol and it's going to give me the autoc completion from the lateral extra intelligence extension and I can use if right here hit the enter I can obviously type some condition then paste my code right here so you can compare whichever method you prefer again I'm going to do both of them so I'm going to select this control shift T then I can type for each hit the enter and it's going to wrap inside for each and I'm going to I can change these two variables and the second approach is cut then I can type for each then I can paste the code and I can type these two variables based on my working experience there is not that much difference between the approach what lateral blade wrapper suggests me and the approach I generally go that's why you might find it useful but I'm not going to use it now let's move into settings category and there are a few settings I want to mention first of all is the format on Save I'm going to take this whenever I save my blade file or PHP file I want my formatter to automatically format this for me the next setting is linked editing this is exactly when you change the opening HTML tag and it's going to automatically change the closing HTML tag but according to my experience this did not work perfectly for blade files that's why we installed Auto rename tag extension but still I'm going to enable this because that's the default setting for vs code for HTML files and the last setting what I'm going to modify is the default terminal I have couple of terminals I have Powershell git bash command prompt I also have WSL and I'm going to set git bash as a default terminal for my vs code whenever I don't develop on WSL I use gitbash whenever I develop on WSL I use Ubuntu WSL as my default terminal so I'm going to set this select default profile and I'm going to choose gitbash and basically every new terminal now will be in gitbash according to my experience gitbash is much more intelligent terminal and has much less issues than Powershell or CMD now let's talk about live Snippets I'm going to open and I'm going to create new live snippet for PHP now I'm going to copy and paste one live snippet and I'm going to explain this and then I'm going to copy and paste everything else where I have so this is the prefix is Pub F and it's going to basically generate the skeleton for the public function now I'm going to open user PHP I'm going to move down and I'm going to type Pub F and hit the tab and it's going to generate the following boilerplate code I can type something then I can hit the tab and the cursor comes down right here and I can return one and that's it let me actually copy and paste my all available live Snippets so here I have this public function private function protected function I also have public static function which has the prefix Pub SF p public static function we have the private static function protected and I also have this belongs which is interesting I'm going to show this to you as well I'm going to open user PHP scroll down below and I'm going to type belongs hit the tab and it's going to generate the following boilerplate code for example user belongs to Country then I'm going to hit the tab again but not like this so if there's an intelligence you should hit the escape on the keyboard so that the intelligence is gone if you want to show the intelligence hit control and space then here we have this intelligence if I hit tab right here it's going to show this whatever it is so I'm going to undo this and whenever there is intelligence escape and then hit the tab and then cursor moves right here and we can just type country model name right here if it's available in the same way we have has M prefix when I hit the enter it's going to generate this has many boiler plate code for example user has many orders and I'm going to hit the tab right here and I'm going to provide order and that's it this is all what you need to do so this gives you possibility to very easily generate the relations from your in your model and this going to save a lot of time of you I recommend to create your own live snippet right here based on your workflow try to speed up and try to save your time now let's talk about my color theme and my icon theme as a choice of my color theme I'm using material theme let me install icon theme as well and then I'm going to activate both of them so in the icon theme I'm going to type atom material icons since we have both color theme and the icon theme installed let's activate them first let's choose the color theme and here are the following options but my personal preference is palanite and I generally go with a palanite high contrast because there is a significant difference between the left sidebar and the main content area you can choose whichever you want I'm going to set the palanite highight contrast now let's set the icon theme I'm going to go with the atom material icons and it's going to give you the following icons right there you can try others if you want so but I'm going to set this into atom material icons and the atom material icons also comes with a product icon theme and you can choose atom material icons right there as well and it's going to change the icons on the sidebar right here as well and at the bottom as well so I'm going to switch between default and atom some material icons and you can compare them you see everything almost everything not almost but everything is changed in vs code where you see the icon so I like this one so I'm going to set this and now let's open the controller or blade file and we're going to see different colors that's um that's what I like we can open welcome controller as well and this is how code in PHP looks like all right my friends this is my setup we installed extensions I showed you uh settings live Snippets and my personal theme and icon theme as well if you find this video useful please hit the like button and subscribe for more useful content if you love my content and want to support the channel you can check my patreon page or buy my course on my website the cool.com thanks for watching and I will see you in the next time

Channel: The Codeholic

Views: 12,741

Keywords: laravel vscode setup, laravel vscode extensions, laravel vscode theme, laravel extensions for vscode, best laravel extensions, vscode laravel extensions, vscode laravel settings, thecodeholic vscode theme, vscode theme, php vscode setup, laravel php vscode setup, vscode laravel live snippets, vscode laravel color theme, vscode laravel theme

Id: OBJCZ_mYc8A

Length: 15min 48sec (948 seconds)

Published: Mon Feb 26 2024