All language subtitles for 019 Setting up Prettier in VS Code_Downloadly.ir_en

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.

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.