All language subtitles for 003 Setting up Prettier and VS Code

And we're gonna start this section

by configuring the VS Code editor

to fit our needs a little bit better

and so that will then make coding a lot easier

in the rest of the course.

And once more, here on my desktop,

I already have the starter files for this section.

So go ahead and get yours

from the GitHub repository as well,

even though in this lecture,

we're not yet gonna need them really.

But let's still open VS Code

because of course, we're gonna need a VS Code window

if we want to configure it.

All right, now here on my Desktop,

of course, I choose the Developer-Skills folder,

which is the folder for this section.

And once again, we have an HTML file,

which already has the script linked to it.

And then here's also the script file,

which has basically nothing.

All I put here to get started

is activating the strict mode,

because remember that from now on,

we should use strict mode in all of the scripts.

And so I left it here already so we don't forget it.

But anyway, let's now start configuring VS Code

and we will start with a tool called Prettier.

And Prettier is an opinionated code formatter,

which means that it makes assumptions

about how good code should look like.

And so if we install it and use it,

then this will make sure

that your code is nicely formatted

and also that it will look exactly the same

as my code looks in the video.

So that's gonna make it easier

for you to take this course

and also, of course, for you to write your own code

in the future.

So this tool is available as a VS Code extension.

So let's click this Extension button here

and then here all you have to do

is to search Prettier

and it's gonna be this first one.

And I, of course, already have it installed.

I just need to enable it.

So I click here on Enable.

But you will have to install it

and then probably reload VS Code.

So I enable it

and so now it is working.

So install it on your end

and reload the browser

and then come back here.

Okay, so let's close the sidebar here again

and so installing this plugin

was the first step.

The second step is to now actually define Prettier

as the default formatter of our code.

So let's go here to Preferences, Settings,

which should look something like this.

And then here in the search bar,

let's search for Default Formatter.

So that's this one here you're looking for.

And you see, we have this huge list of available formatters

but the one that we are looking for

is this esbenp.prettier-vscode.

So this one should be here

in case you successfully installed Prettier before.

And so let's just click this here

and then we should be good to go.

We just need to make sure

that the Format On Save setting is also correctly set.

So Format On Save

and we did this actually already at the beginning

of the course but in case you skipped that video

for some reason, then just make sure

that you actually tick this box here.

All right?

And so with that, Prettier should now actually be working.

So let's just declare a variable down here

and give it a couple of lines of space.

And then simply x equal to something

and then give it a save

and you see that Prettier automatically did some changes

to our code.

So first of all, it removed all these blank lines

that we had here

and it also transformed these single quotes

into double quotes.

Finally, it also added an empty line of code here

at the end, okay?

So this may seem like small changes

but all of them added up throughout all the code

can actually make a big difference.

And again, Prettier is an opinionated code formatter.

So opinionated means that they have a strong opinion

and then basically, when we use the tool,

we have to accept that opinion.

And many people don't like that

but actually, I believe it's a good thing.

It makes it so I don't have to take a decision

on how the code should look like.

For example, some people prefer

to write the if else statement without a space here

and other people like to have a space here.

And let's just write something here.

And so now no matter what we do,

Prettier will take that formatting decision away from us.

So if I save this now,

you see that it automatically inserted that space here.

Even if I don't like it.

So if I remove it and save it again,

it will be back.

All right, but this makes it easier

to make your code consistent

and to make your code also consistent

with other people's code

and in this case, my code that you can see here

in the video.

And so if we both use this tool,

our code will look the same.

Now, there are some things that we can configure

and for example, one thing that I don't like

is the double quotes.

I prefer to use the single quotes

but right now, Prettier will transform every single quotes

to double quotes.

So add single quotes, give it a save

and you'll see now they turned to double quotes.

And some things we can actually configure in Prettier.

So let me show that to you.

So just google Prettier

and probably the first option here will be this tool.

So here we can go to Docs.

And then probably here.

So here we can do Options.

So Configuring Prettier and then Options.

And probably the webpage looks a bit different

by the time you're watching the video

but just search for the options here.

So let's take a look at some of the things

that we can change,

for example, the width of one line

or if Prettier should use tabs or spaces here

or if it should add semicolons or not

but what I'm interested here

is the Quotes.

And so using this option,

we can tell Prettier to use single quotes

instead of double quotes.

And so that's what I want.

Now, how do we actually configure Prettier?

Well, there are multiple ways

but the easiest one is to create a configuration file

in the current project folder.

So let's go back to the sidebar here.

Then we create a new file

and this one is gonna be called .prettier

and then rc.

Okay?

And now here, we basically write this object

and it's not really an object

because this is not JavaScript code.

And so now we write singleQuote.

And actually, VS Code already gives us this option here.

And then as I hit Enter,

actually we get this preset value

but I actually want to change it

to true, okay?

And if I now give this one a save

and then also save this,

then you see that it automatically changed

my double quotes back to single quotes.

Great.

Now, another thing that Prettier does by default

is something in arrow functions.

So let me shows that as well.

And closing the sidebar here,

so const, let's create a calcAge function again.

Then we say birthYear

and then we want to return 2037

minus the birthYear.

So just like we've been using

but now watch what happens when I give it a save.

So you see that Prettier actually wrapped

this single parameter here in parentheses.

However, I actually don't like this.

So when there's just one parameter,

I like to see it without the parentheses

and so that's another thing that we can configure here.

And so that one's called arrowParens

and so now we can choose between always

and well, some other options.

So let's just search that here

with Command + F.

arrowParens.

So we can choose between always and avoid.

And so I want avoid here.

Okay?

And so you can take a look

at this entire list here if you want.

And then you can change your own configuration

to match your preferred coding style.

Okay, and probably by now,

you don't have yet really a coding style

but it's good to know that you can change stuff

that you don't like or that you don't want to see.

So for me, this is the two things

that I always change and as necessary,

I keep adding more stuff from time to time.

So let's close it, give it a save

to see if this change is now reflected here

and yeah, so as I saved it again,

the parentheses here were gone.

And remember that we enabled Format On Save.

And so that's why all these formattings take effect

whenever we save a file.

All right, now if for some reason you cannot make this work,

then don't worry.

You can still progress in the course

without having Prettier working.

That's because this tool does, of course,

not influence how the code itself works.

It's just a visual tool

that only changes how the code looks.

Anyway, this was already a big step

on making coding a little bit easier for us.

But now I want to show you something else,

which is to basically automate something very boring

that we're doing all the time.

And that is writing console.log.

So whenever we want to log something,

we have to write all of this console.log

and do all this work

but in VS Code, we can configure snippets,

which can take that work away from us.

So let me show you how.

So we go here in the menu

into this Preferences submenu

and then here we can define User Snippets.

So click on that.

And then you can open one of these files

but the best thing to do

is to just create a New Global Snippets File.

So click that and then just give it a name

and it doesn't really matter.

I'm just gonna call it jonas here.

And so here we can define a couple of snippets

and remember that the snippet

that we want to define is simply one

that automatically writes console.log for us.

And actually, there's already an example snippet down here,

which basically does just that.

So it's this here

and so let's just uncomment all of this.

So again with Command + slash

and so this here is the name of the snippet.

Then here we say that it works in JavaScript

and in TypeScript.

This is the command that will basically trigger the snippet.

And here I like to use cl.

So whenever we write cl in the code,

it will then expand that to console.log.

Then here is the code that will actually be written.

And here get rid of this second line.

And then here, also get rid of all of this

because I found that this is the best way

to make this work.

And it's not really important

that you understand how this works.

This is just a recipe that I want you to follow here

just to make our life's coding a little bit easier.

So then give it a save

and once you head back to your script

and now write cl,

which remember is this prefix.

But you could have chosen anything else.

But in my case,

whenever I write now cl

and then hit Enter,

it will give me console.log.

And then all I need to do is to go back

and then write whatever I want to log here.

Now, here we can also like define this $1

with just the way it was before

and then this will place the cursor between the parentheses.

But then I found that when you do that,

the autocomplete in VS Code does no longer work

and so that's why I don't use that.

So you see, now the cursor is here

but then autocomplete does not work

and in this case, you can't really see that

but if this variable name was a little bit longer,

xyzabc,

and then xyz,

so you see that the autocompletion is not working.

I would have to go down and go up again

and only then it would work.

Okay and so let's just remove that

and call it a day.

Okay, so from now on,

I will no longer manually type console.log,

I will always just do this.

Okay?

And now to finish,

let's just go maybe a little bit

over my extensions that I have here

just to show you what I use.

So let's remove that search text there

and so these first two are about HTML development

and I'm gonna show them to you in the next section.

Then these don't really matter.

ESLint is a tool that we're gonna use later.

Image Preview is also good for HTML.

Then Monokai Pro is the theme that I'm using.

Remember.

Then, of course, Prettier.

Then I have Settings Sync,

which is very useful to synchronize settings

between different VS Code installations.

For example, if you have multiple computers

or multiple accounts on your computer.

And finally, one that I use all the time

is TODO Highlight.

So this allows me to highlight parts of a text.

So for example, I can do something like this.

So when I write BUG in the comment, for example,

then it gives me this nice red highlight

or FIXME is another one.

So let me show you my settings here

that will show how I do that.

So that is Preferences and Settings

and then we need to go here into this icon

and again, by the time you're watching this,

this might have changed

but what matters is that you need to open the settings

in a JSON format.

And so this shows all the settings that I have.

And so here is how I defined these colored texts.

So you need to install the TODO Highlight extension

and then in your settings,

you just write this kind of code

to define different colored texts

for different texts.

Okay, so a very useful one again.

Yeah, I think that's enough for this video.

This one was not really about coding or anything.

It's just to set us up for the rest of the course

and also so that you start getting a feel for a little bit

of the tooling that we have in the JavaScript ecosystem.

All right, and actually in the next lecture,

we will continue doing that.

So I see you there in a second.