As far as my text editor, I use Visual Studio code.
And in this optional video I want to show you a few very useful extensions I'm going to use throughout
the course.
As a side note, like I just mentioned, this video is optional, so if you're not interested, feel
free to move on to the next video.
Now, if you are interested in a specific extension, which I don't mention in this video, just ask
me in the course Q and A, and if you're interested in my entire setup, please reference this repo.
So my GitHub profile.
John hyphen Smilga and then you're looking for the VS code setup repo again, the repo is vs code setup
and the first extension that I find extremely useful is the snippets one.
So let me navigate to my extensions.
You're looking for this extension now.
It has quite a long name and if you take a look at their docs you'll see Bunch and Bunch and bunch of
options.
But effectively I just prefer this extension to create the components quickly in React.
So how is that going to look like?
Well, let me go to the project and here let's say I want to create a new file and I'm going to call
this test.
JS Once I navigate over here and I say note, since we're going to be using Vite, actually we need
to add here JS x If I navigate to this file, notice once we install the extension, I can right away
use a snippet with a value of r, a, f, c, e, and this basically sets up the component.
For me and right away sets up the export default again.
There's tons of snippets, there's tons of options.
And if you're interested in more, of course, please reference the actual extension docs.
But in my case this is what I'm going to use throughout the project.
So once I create the component, I'll go with the snippet because that's my preference to have my React
components as Arrow functions and then I'll right away export as default as well.
So that should do it for snippets.
One thing to keep in mind.
Once you install this particular expansion, most likely by default, you will import react.
But I believe starting with React 17, we don't need to do that anymore.
And in order to fix that, you will navigate to your settings and you can do it in two places.
I'll show you right away that in a settings.json if you pum pum pum pum pum.
Let me find it somewhere here.
There should be auto import.
Notice over here this react snippet settings import react on top set to false.
So you can type it here in the settings Json and then you will have that import or in the settings you
can actually look for import react and that should also come up and notice how it's unchecked.
So basically by default, once you install the extension, most likely this is going to be checked and
that's why you keep getting this import react from react.
So uncheck it.
Most likely you'll have to basically reload the text editor and after that everything should be fine
so you won't get that extra import.
Now it's not a big deal if you have that extra import, but I'm just saying that.
If you don't want it, please follow these steps.
Then I also have auto rename tag.
Again, let me navigate back over here.
Notice this extension over here and it's very straightforward.
Once I select the tag, I right away have access to both of them, to the opening one and closing one.
So if I remove div and set it as heading one notice I don't have to do that in two places.
Then we have the prettier and this one is very useful because it formats the code.
So you install this extension and also for this one you want to set it as default.
So let's navigate to the settings, let's type format over here and essentially you're looking for a
few things format on paste, format on save.
So I have both of these checked and then we have also default.
And I believe it was formatter.
Something like that.
Yep.
So default formatter and you want to make sure that it's the prettier again.
Otherwise it's not going to work.
And if you reference settings Json, the rule you're looking for is this one.
So editor default formatter.
And then of course the value is prettier.
Now as far as my prettier rules actually only have one I believe where I use the single quote.
So notice prettier than single quote and true.
And of course if you navigate back to the settings, you can set it in the gooey as well.
And lastly, I want to talk about Emmet, which is built into Visual Studio code.
However, if you want to use it in React.
We just need to add a one rule in settings.json and essentially it works like this.
Let's say I want to return a div with a certain class.
I'm going to go with hero.
I can just type dot hero and notice right away I have this Emmet abbreviation and then if I click on
Enter or the tab, I'll right away have the div with a class of hero.
And of course, this is something that I'm going to do throughout the course.
Again, this is built into the Visual Studio code.
However, by default you won't be able to use it in React.
And in order to fix that, again, you want to go to Settings.json.
And this is the rule you want to add.
Basically, it's emit include languages and you want to set JavaScript equal to JavaScript react.
Like I said, I use more extensions and few extensions will actually install together during the course.
But these are the main ones that I find super, super useful.
And with this in place, we can start working on our project.