-: So this section and the node form project
are now basically completed,
but in this video I wanted to very quickly
go over my VS code setup
and also together with you set up the Prettier extension.
And so these are the extensions that I have installed
in my VS code and not all of them are going to be relevant
for this course,
but whenever there is a relevant extension
I will mention it by the time that it is useful.
For example this .env extension here will be useful
to highlight environmental variables in a .n file.
So let's just quickly go over some of them.
For example ESLint is useful to find bugs in our code
and actually we're going to set up ESLint with node a bit
later in another section.
We have image preview which is a very nice
small extension to preview images.
And maybe you have noticed that when we were doing this,
for example,
the sample here you see that here on the left side
it displays all the images that we include in a website.
So in this example it is this one.
All right so just something small that I found very useful.
What else do we have here?
We have Prettier and so this is the one
that I want to config with you in this video,
but for now let's go over
some other here.
So Pug is a language that we're going to use later
to build templates
and so it's useful to have this beautify
extension for that one as well.
Then I also have TabNine, which does some nice magic
auto completer sometimes.
Then I also have TODO Highlight,
which is very useful to do
this kind of
magic here.
For example when I have TODO,
it will highlight it in this green color
or if I write BUG
like this it's going to turn red
or FIXME
and I have all kinds of these keywords here
that I have to find the different colors
to make them visible in my code.
And it even shows up here in this
scroll bar.
If I had these in different lines,
then you would see
the three colors are now here in this side
and this is incredibly useful.
All right.
And then of course my
VS code theme,
which is Oceanic Next,
so I get this question all the time
and so instead of asking it
well here is the answer for that.
All right.
But now
about
where is it?
So Prettier
this is a very nice extension that can
automatically format code,
no matter if JavaScript
or CSS
or even HTML.
With this extension we no longer need to worry
about formatting.
And it is actually very opinionated,
so it follows a very strict set
of rules with only a small configuration possible.
But in this case of code formatting,
it's actually very nice when someone else
takes these decisions for you.
So that is one less thing that we have to worry about doing.
Okay, so our code will automatically
format without us having to do anything
or worrying about a certain style.
Okay?
So if you want to give it a try,
please go ahead and install it now here.
Probably you have a install button.
I, of course, already have it installed.
Next up what you need to do in order to get the full power
of this extension
is to go to your settings
and then activate Format on Save.
So just
search for format and then Format on Save.
So whenever we save a file now
it will automatically use Prettier to format our code.
So we installed Prettier.
We enabled Format on Save.
And now we can configure Prettier a little bit.
Again,
as I mentioned it's very opinionated.
So there's not a lot of stuff that we can change
but some things we actually can change.
Now we could do that here,
right in VS code,
but instead
what we can also do is to define a configuration file.
Okay?
And I find that actually better to do.
So instead of using VS code to define the settings,
we can use a Prettier config,
which is called
Prettier RC.
All right, so it has dot then prettier
rc.
Then we open the curly braces
and then in here we can define some settings.
And I find it better to do it like this
because then I can change configurations
from one project to another.
And even more importantly,
it makes it easier for multiple developers
all on the same team to all use the same configuration.
Okay, so that can be very very useful on teams.
Even more useful than when you're just working on your own.
Now the only setting that I actually want to change here
is called single quote.
So actually Prettier already has this
auto completion built in and so it knows that single
will mean single quote.
And the default is false, but I want to set it to true.
And so what that's gonna do is that all my quotes
will change from double quotes to single quotes, okay?
So I gave it a save
and here is our index.js.
And now let's see if there is any double quotes here
and I think they're not
because I pretty consistently used the single quotes anyway.
But let's just put some double quotes somewhere here
and now I'm gonna give it a save
and take a look at what happens.
Whoa.
So first of all you saw that a lot of stuff changed here
and so our code kind of jumped around here,
but this is where I had the single quotes here.
So you see that they back to being the double quotes.
Now all this code jumping around was probably
because at some point I had multiple lines.
And Prettier does not allow that.
So if I have something like this and give it a save
then Prettier will only allow one blank line.
And actually this was for me the most difficult change
of all the formatting that Prettier does.
And it's not configurable
so we cannot change that unfortunately.
Because sometimes I like to have multiple lines,
but with Prettier that's just not possible.
I can do something like this and then it's gonna work
but it's just a work around.
But still with this problem I really prefer to use Prettier.
Again because it takes the thinking of formatting
away from it.
For example, something else that I did here was this.
So whenever a certain number of characters in a line
is exceeded,
it will then find a good way of breaking the code
into multiple lines.
And so that's what it did here.
Let's see what else we have here.
Well I think
for maybe besides this change we just taught
everything kind of remained the same.
Okay and so from now on in all the rest of the codes
in this course,
I will always use this PrettierRC configuration file
with auto save on true.
Okay.
Another thing that I didn't mention is
that it automatically puts the semicolons,
so if I go ahead and delete this one,
and this one, and this one.
Give it a save.
You see that they are back.
All right?
Now if you want to get an overview
of all the stuff you can configure with Prettier,
well that's very simple if we write Prettier into Google.
So they position themselves as opinionated code formatter.
And like I told you before
and down here we have the options
that we can actually configure.
So print width.
The tab width.
So if you're one of these people who uses four width,
which I actually was until kind of recently,
like one year ago.
Well then you can configure that using the tab width
then you have for example the quotes that we just changed.
So single quote we put it to true
and you have all kinds of stuff.
You can actually see it here on the right side, okay?
But again, it's not a lot of configuration.
So most of the stuff you can really not change.
Another thing that we can experiment with is the tab width.
So let's see this one to, I think the default is 80.
Let's set it to something like 120.
And
I thought this would change this piece of code here,
so being back to what we had before,
everything in one line.
Just to show you.
But maybe our line is actually even longer than that.
So let's put something really ridiculous here like 200
and whoa!
What's happening here?
Ah ho! So you see that actually is now changed
to something even weirder.
Okay so I never did just kind of experiment.
Put it back to 120
and what's going on here?
Let me just quickly fix this.
And it does it again, all right.
Put it back to 80 as we had
and now it looks like this.
Oh,
yeah!
Oh I'm sorry.
That's not what I wanted to do.
Of course I didn't want to change the tab width
when my default is two.
I wanted to change the print width.
So basically how wide one line can be.
Oh that was really stupid.
So now it's back to normal because the default is two.
So yeah now you can see that it actually got back into
one line here because at this point here we are at column
96.
As you see down here and so the limit is 120.
And so it didn't have to wrap this line of code
into the second one.
Okay?
But I actually like this 80 limit
and so I'm going to put it back here
and use that one in the future.
So I adjusted the default so let me just get rid of it.
Give it a save.
And so we're back to the way it was before.
So if you think that you like this
then please go ahead and use it just like I do.
But if not, well then just kind of ignore everything
that I said in this video
and just keep doing the more normal way.
So that's no problem as well.