Jonas: 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.