My VSCode Setup for Laravel Development + 1000 Subscribers! 🎉

hey everyone uh before i get into this video i just want to say thank you because we finally hit 1000 subscribers i'm glad everyone's finding value in these videos and i'm happy to make more of them i find it kind of fun so thank you so much for subscribing and supporting the channel if you're not subscribed please do consider doing so and if you have any suggestions for future videos i'm all ears so just leave your comments below in this video i kind of want to go over vs code and what i use i got some questions in a couple comment sections regarding the theme i use for vs code i figured i might as well go over the theme and extensions some key mappings and a couple user snippets i have and just make a video out of it so let me just open a project here so this is a multi-step form project that i just recorded and it's uh freshly opened you can see that my theme is well it is what it is i'm going to show you in a second uh before i get started i just want to say that the i'm not one to really modify text editors too much but the one thing i always do with vs code is limit the amount of sidebar things here i don't like it when it's cluttered and so i just use command shift x to open the extensions part immediately you can see i'm using the community material theme i mean you can't see but you see i have it installed if i go into my themes here i'm using the community material theme pale knight there's a whole bunch of them i encourage you to try them out if i had to use a different one it would probably be the theme ocean high contrast but this just seems a little dark for me this one's okay but i use i use pale knight because it just seems to work the best on my monitor and it kind of matches everything and i like that it's easy on the eyes and that the syntax highlighting is pretty cool so that's what i use community material theme all links will be below in the description in a blog post i'm just going to list everything in one big blog post for for you to check out and now let's go through the extensions so i'd say the two most important extensions i have are php intellifence it would take a long time to go through everything that this does but i use a lot of the premium features that work for interfaces and abstract classes stuff like that and also the code completion is great i feel like in a lot of ways php intellifence bridges the gap between vs code and phpstorm and similarly vitor does the same thing for vue so i use this review mostly at work because we use view and inertia there i don't really do much of that at home but this is also great i do recommend this while we're on the topic of intellisense tailwind css intellisense is really great i can actually show you a demo you can see in this file here that it's actually showing the colors of what we're using and so if i wanted to make this text blue i could pick a shade this way of course it's going to kind of underline it saying that you already set a text color so you can't do it twice it makes sense but it is pretty cool i also use the php namespace resolver and in a lot of tutorials i'll say make sure that's imported or else it won't work because behind the scenes i'm actually just hitting the the correct keys automatically not thinking about it and already importing stuff i can show you how this works so in the web file i have this create userform component here if i remove the import i click here and hit control option i it'll import it automatically but that's because it's only one class available for import if i do something like user and hit control option i it'll give me the option of either one of these because they're both available i just select which one i want and it does it this is pretty handy especially if you're working on like different controllers and stuff you're creating controllers it's just really nice to just be able to import automatically or or have the selection of what you want to import it's it's quite simple but it's really really great tool similarly something else that's simple is laravel go to view this one is really really nice it's by coding you for example if you're in a live wire component it's really annoying to have to like manually go find this if you just want to go see the template now i can just command click it'll go straight to the template kind of save me time i like that it'll work for blade templates from controllers and livewire stuff really great really simple i do recommend installing that and this one better php unit by caleb porzio it's uh caleb is the creator of livewire this is such a great extension if you write tests a lot let me show you so if i open registration test i have my key mapping set so if i hit command kr it'll run this test which my cursor is in and if i run command kf it'll run both tests or all tests within the file and i'm not one to actually use the terminal built into vs code because i don't like how much screen real estate it takes typically i use item but in the case of tests we at work we do a lot of tdd test driven development and it seems to really speed things up if you could just see the result of your test right away within vs code and so i use that of course if you run a test you can just close the terminal after with command j so that's great i think that covers everything except for the get stuff so i have forget related stuff when you're working on a team i have git lens and open in github git lens is really powerful for its get blame feature so let me show you this if i toggle the file blame i can see what was committed when like which lines and to which commits they belong to who committed how long ago this is not so much for blaming people for stuff like the name suggests but it's more for uh if you're writing something and you you're confused about what it does you can check who wrote it and then ask them it's a really just great way to kind of stay on track and like not waste time trying to figure stuff out when you can just ask someone for for a little bit of clarification and it's also nice that you could see who wrote what just by clicking through on the lines i'm also a fan of the opening github this is really great especially if you're you're part of your team or your full team is remote like i had in the past if you click a line and if you want to um ask someone about something let's just say you want to ask someone about the submit method uh their remote or your remote and you want to just send them this line through slack you can do command gc which i have a key mapping for it'll let you pick your latest your current or latest uh branch or from the latest commit i believe and it'll let you copy that link uh alternatively i've also mapped command go and that'll give you the same selection but it'll open in your browser and actually what's really cool is it'll actually open on the line that you've selected inside your editor this is just such a great tool because you can copy the line or copy the the link paste it right into slack and ask your question it's amazing that's pretty much it for the extensions i don't really have much else to share there i also have this vs code printing one here that just prints off code but that's more for tutorials i just sometimes i'll print off a page and keep it beside me just so i have something to reference some of the key mappings i have i'm not sure which ones exist within vs code when you just first install it and what i map myself i think command shift e for opening the explorer is the one that exists within vs code by default i've mapped i frequently run into the situation where i'm switching projects or branches and i kind of want a fresh start in my editor i don't want so much clutter and so what i'll do is i'll actually just use command kw to close everything in my editor and then also command shift e to open the explorer command shift a to collapse everything so let me show you again if i hit command shift a it'll close everything it'll collapse all the directories within the explorer and so this is a really great way to clean everything up when you're just kind of switching and also just like chrome you can use command shift t i think this is built in as well like default to reopen a file you just closed so command so if i close that file i can use command shift t to reopen it i do also use the control 1 and 2 or 1 through 9 to kind of switch files i guess the idea is to use the mouse as little as possible when you're within vs code it's kind of just faster to stay on the keyboard and once you do get used to it it's way easier to just stay on the keyboard i also use command d a lot within some of the tailwind tutorials and that's just multi-cursor so you can just replace stuff at once oops multi cursor those are pretty much the only ones i use i'm sure i have some others but these are the ones probably worth mentioning that people don't really know that much about as far as user snippets go if you're not familiar you can create these snippets that you can then reuse in your code and if i type at funk or function it'll create a public function kind of template for me within whatever class i'm in so if i go into the user and i want to create a method quickly i can just do at function create a public function name it hit tab it'll go to the parameters params hit tab and go to the body of the function and do whatever i want it's a it's a pretty fast way to create stuff also i also have a test one so test code snippets this one will tab first tab into the name and then tap into the body of the test so if i go to example test and i just want to create a secondary or a second test i can do at test and i can make this one test example two i'll just test example and within here i could do this assert true true and run it and you can see that it works so that's great i can run the whole file and both tests are tested and they both pass so that's kind of my vs code setup i hope that was somewhat helpful again i'd like to thank everyone for a thousand subscribers i think we're currently almost at a thousand and fifty if you have any suggestions for uh future videos or anything else you wanna you want me to make videos about or have questions about please leave them below i'm going to do my best to kind of answer everyone so thank you for watching and i i'll see you in the next video

Channel: David Grzyb

Views: 5,878

Keywords: laravel, inertia, fullstack, vuejs, vscode, themes, extensions, plugins, setup

Id: Iv6EuV0ZDXI

Length: 10min 12sec (612 seconds)

Published: Sat Apr 10 2021