So there are two popular questions that
you guys tend to ask me every once in a while. The first one is, what is the theme
that I use for my VS Code? The next is, what are the extensions that I use that drive
me crazy every single episode? The first thing I want to do is take a look at the theme. The
theme for me is pretty important. I started learning to code on Sublime. That was a really
cool theme that I liked. I liked the way that everything just kind of stood out on its own
and so that's what I've brought over with me to VS Code. If you go to the little settings
cog down here, and you go to your color theme, all this is, is the same Sublime sort of theme
that there is. I have here a Laravel project so that we can take a look at stuff. Let's go to
the resources/views/app.blade.php, and as you can see this is the same sort of setup that the old
Sublime used to have before they got rid of the more classic Monokai theme. That's the theme
that I'm using. There are approximately 16 different extensions that I use, and one of the
main ones which is more of a stylistic thing for me than anything, if you take a look at this tree
view structure that we have, we just have these sort of like little arrows. Which it does have the
PHP elephant in there, but you know everything is pretty generic in terms of icons. What I like to
do is, I like to go to the extensions and type in vscode-icons, and it's this first one here.
Go ahead and open that up. All it does is, it really just kind of gives the icons for the
files or the folders or anything that's specific to those things. Let's go ahead and install it.
We'll select vscode-icons up here, and that should be good. Let's check this out. Now you see on
the tree view we actually have the logo for NPM, logo for Composer, for Git. We have different
types of files and every file has its own ending, so this is a PHP instead of the elephant
which is kind of cool I think. That's just basically what I use and it helps me navigate,
so even if I don't want to just type it in and I want to specifically go and look for stuff,
that usually helps me do that. The next thing that I do, it's a lot more specific to Laravel,
and this is called the Laravel Extension Pack. Let's go ahead and open that up and take a
look. Basically all it is, is an extension pack that has 10 different extensions that
we could use and they're all very helpful. I've been using this for years. When I first
started using it I think maybe there were 5 and now as you can see we have 10. Let's go
ahead and take a look at them specifically. Let's go ahead and install it. The first one,
it's Laravel Blade Snippets and it's pretty self-explanatory. It just gives you the syntax
highlighting for it. If we go to our app.blade.php again, you see that this was white before we
installed it and now they're green, so it does add that syntax highlighting for us. Let's take
a look at the next one which is Laravel Snippets, and these are just basic Laravel snippets.
They give you a little example down here. You can start typing something and it'll show up. They give you a little example here
but if we go to our web routes, that's what that's doing. If we go ahead and
start typing in route, you see all of these here. This is because of that extension. Route get, it
gives you the basic snippet of the route and just different commands that we end up calling within
our projects. Let's head back. Let's see what else we have here. Laravel Artisan, this allows you to
run artisan commands within Visual Studio Code, so when we do PHP artisan and migrate, stuff
like that, that's what this extension is allowing us to do. We also have a quick
jump to view. Let's take a look at that. As you can see here, it just allows you, when
you're creating different things in the route and you see how it's underlined right
there. It'll allow you to CTRL and click it, and it'll take you to that
specific view. Let's take a look. Get, or actually we'll do
view, and then our view will be app.blade.php, or just app. Now you see that
it's underlined and it tells you ALT and click. That will bring us to our app.blade.php. That's
a cool little extension that comes with it, go to view. The same thing with the controller. Let's
go ahead and quickly create a new controller. We'll make it resourceful so that we
can have some routes to work with. Let me get rid of this, now we can take this, we'll just call it app index. Let's go ahead and
it is go to definition, we need to import that. I thought I named it user controller. Guess I named it user. Let's change that
up, user controller. This will be user controller. We'll open that up, user controller.
Now we can close this. Http/controllers, of course spelled it wrong. Let's try it. As you can see,
if you hover over here it tells you exactly where that file is located and now if you right
click you can go to the definition of that. That's how you can go straight to that controller. That's
what that extension is allowing you to do. We've gone so far that I've forgotten which extension it
was. This, Laravel goto controller. Then there's also Laravel Extra Intellisense which is basically
all of these little things that keep popping up. As you type is when things will start getting
filled out, and that's what this Intellisense is doing. It's just built on top of the
Intellisense that's standard with VS Code. Another one we have is DotENV, and this is for our
.env files. This allows you to have that syntax, so before we installed it our .env was just one
color, and now it's got some highlighting in it for the colors to kind of separate stuff. It
makes it easier for you to navigate through it. What's next is the Editor Config for VS Code, and this just allows you to override some
of the settings in your editor config. If you wanted to use tabs instead of spaces,
it allows you to do that right through the, see the indent style, indent size. This is a
config file within VS Code, your editor config. Which is right here and this will
allow you to change up what you need to change up for your default settings.
Fantastic! The next extension that I use, and I do admit that I forget that I have it, but
it is a good one. This one is Duplicate Action, VS Code duplicate allows you to create
another file. It'll probably be better for me to just show you. We'll go ahead and
install it, and we'll go to our tree view. Let's say we have this app.blade.php,
and I want to create another one. This one, when you right click it, it has this
duplicate file or directory. You go ahead and click that and now you can name your file whatever
you want to name it. It's also going to create it in the same folder that the one you're duplicating
it from is. We can just go ahead, take this, and end it off. Now we have a duplicate of
that index page. That's what that extension is doing for us. The next extension
that I use is PHP Namespace Resolver. It's right up here, this one. What this one
basically does, is it allows you to import and expand your class. That's what it allows you
to do. Let's go take a look, we'll install it and we'll head to our routes. Let's
go ahead and get rid of this one. If I right click the user
controller, we have some more things in our menu. One of them is to import
class. That brings it right up top and that's how I import it. The other thing you can do with
this is, if you don't want to right click it, you can just get rid of the letter and it'll
pop up this menu. Go ahead, press enter, and that also imports it up top. That's how
I import stuff automatically when I'm coding. The next one I came across not too long ago was
these brackets. Let's say I wanted to add some brackets here, you know, that's fine. Let's say
add some more, that's fine. They're pretty much just going to be either of those two colors,
but the extension is called Rainbow Brackets. It's the first one right here. As you can see,
1.2 million downloads so it's very popular. What this allows you to do is have different colors to
open and close your brackets. Let's just go ahead and install it. We head back to our index page,
you see we have two different sets of colors and that's much nicer. It allows you to find your
opening and closing brackets. Another one that I like to use is called Laravel Blade Spacer, and
this one is good for me because what it does is, it allows you to automatically set this sort
of space in between your brackets. I like that, I think that's good. It makes things a lot
cleaner for me. Let's go ahead and install that. Now when we do brackets, you can see it gives us
that nice little perfect space right in between. Also, it makes it nice and clean for us. I tend to
use Tailwind. I use it more than I would use let's say Bootstrap. But Bootstrap has its own extension
that you can use for little snippets for it. Right here we have a div, and we'll just do that. We'll
add a class. Let's say I want margin top of 4. As you can see, nothing happens. We have no idea
what that is. That's fine if you know Tailwind classes off the top of your head. Then this will
be just fine for you, but let's say you want to have a little drop down whenever you start typing
in stuff for your Tailwind classes to make sure that you're getting the correct syntax for it.
What I use is this Tailwind CSS Intellisense, and that's exactly what that does. It gives you
a drop down for your syntax. Let's go ahead and install that and see the difference. We'll try it
again. We'll have a div and blah blah blah. In our class you can see we're starting to get some drop
downs. Let's say margin top 4, text. You can see all of this stuff here is now Tailwind classes, so
text-right, bg-gray, and now you can see it's the drop down. That's all that that is, it's giving
you those classes, really easy. It gives you the good syntax for it and you can look to see. I
like also that it shows you, let's say you're doing colors, that it shows you what the colors
kind of look like before you even put it in. Which I think is nice. That's something else that
I use. The last thing I use on a regular basis, and if you're using Vue JS, whether or not you're
using it often, this is still a really good tool to use, this Vetur. This is by Pine Wu, it's very
popular. 9.16 installs. Let's go ahead install it, and let's take a look and see what it does.
Basically it's just a language server for Vue. It gives you the syntax highlighting,
semantic highlighting, so pretty much what our Laravel packages did for Laravel. This
is for the Vue JS side of it. Again, syntax highlighting, semantic highlighting, snippets,
emmett, and let's say I was to disable this right now and we go and look at some Vue pages. This
doesn't even have the Vue icon for it. Everything, just it's just blah. Everything is just
a white color, it has no definition to it. Let's go ahead and turn that back on, go
ahead and enable it. Go back, and as you can see now we have the icon for Vue. Let's say the
dashboard. Now you can see there's a difference in the color. You see the semantic highlighting.
This is a very useful tool when you have Vue JS in your projects. That about wraps it up for me.
I am pretty sure we have about 17. I'll know the final count exactly what it is and I'll be
sure to put that in the title of the video, but I think there's about 17, 16, or 17
different extensions that we used. I hope that was helpful. I hope you guys are enjoying
the channel. If you are go ahead and give this video a thumbs up as it really does help. Thanks
for watching and I'll see you guys next time.
