Instructor: Now, before we can start writing
a single line of code,
we first need to install a special tool
called a code editor.
And a code editor is essentially a special software
that allows us to write programming codes,
like HTML in CSS, in a very easy way.
And since this course is probably
your first contact with any coding,
in this video I will guide you through installing
the very best code editor in the world.
And I will then also show you
how to set it up a little bit
with some special settings, color themes and extensions.
And the code editor that we're gonna use in this course
is called Visual Studio Code from Microsoft.
And as I just said earlier,
this is, in my opinion and in the opinion
of many other developers,
the very best code editor for web development in the world.
So actually every developer that I know,
right now uses this code editor.
And so you also can't go wrong by using VS Code.
So to download it, just go to code.visualstudio.com,
or to make it even easier, you can just Google VS Code,
and it should then be this very first result.
And of course, VS Code is available for free
and for all platforms out there.
So macOS, Windows and Linux.
And so please just go ahead right now
and download the installer for your own system.
Then install the program on your computer
just like any other program.
And then once you're done doing that,
just come back to this video
so that we can set up your editor a little bit.
Okay.
So I hope that you managed to install Visual Studio Code
or VS Code, as we also call it, on your computer.
And once you open up the code editor,
it should look something like this.
And as I said earlier, we will now set up
VS Code a little bit to make it easier
for you to follow this course.
And we will start by installing an extension.
And an extension for VS Code
is basically just a small piece of functionality
that we can download and which makes the editor
a little bit better,
so we can basically customize the editor to our needs.
So you can think of it
a little bit like Google Chrome extensions, for example.
So it's the same concept.
And the one that we're going to install for now
is called Prettier.
So just search for Prettier,
and then it's probably going to be this first result here,
because Prettier is an extremely popular extension.
You see, it has over 12 million downloads right now.
And so just go ahead and click Install here,
and then enable it.
And probably you will then have to also reload
this VS Code window.
Now what this extension does
is to automatically format your code
whenever you save it.
And this is going to be very important
so that your code always looks exactly the same way
as the code that I am typing in the video,
because that way it will be way easier
for you to find any errors or any mistakes
that you have in your own code.
So it will be easier for you to find and to fix mistakes
as you're going through the videos.
Okay, and for now, this is actually going to be
the only extension that we're gonna install.
We will just install some more
a bit later in the next section.
So now let's come down here to this Settings icon,
then choose settings from here
so that we can now tweak a couple of settings.
And let's actually start with two settings
that are related to the Prettier extension
that we just installed.
So just come here to the search bar.
So searching for the setting name
is actually the easiest way of finding them.
So just type here default formatter.
And so here we actually need to set it to Prettier.
So I already have to set, of course,
but you will have to go through this list
and find Prettier somewhere here.
So it is right here.
So choose Prettier code formatter,
and it needs to be this esbenp.prettier-vscode, okay?
And so now VS Code knows
that it should use that Prettier extension
that we just installed to format your code.
Now, when should it actually format your code?
Well, we need to set another setting for that
which is the format
on safe setting.
So it's this one here.
And here you need to check this checkbox
so that Prettier will automatically format your file
each time that you save it, okay?
Another one that is very important is the auto-save setting.
So auto save, we need to set it to on focus change.
And what this will do is to automatically save your files
as you go to another tab
or as you leave the window completely.
And so this is very important
so that you never lose your edits
and so that you don't have to manually save your files
all the time.
So set this one to on focus change again.
And another one that I like to use,
and I'm not sure if this is actually the default already,
is to set the tab-size to two.
And so in this case, this is just, again, so that your code
looks exactly the same way as my code.
So the tab-size is basically just the indentation
of the code.
And you will know what that means a little bit later
once we start writing HTML.
Okay.
And these are the four settings that we need to set.
So I think we're good now with the settings.
And now finally, let's talk about these colors.
So basically we can customize VS Code with a color theme
which will then change the colors
of the code editor itself and also of the code.
So it will basically highlight different parts of the code
with different colors.
Now this is just a thing of personal preference.
So you can just use the theme
that already comes automatically by default with VS Code,
but I choose to install a special theme
that I believe makes it very easy to read the code,
and so for you to follow this course in an easier way.
So a color theme is basically just another extension
that we need to install,
and this one is called One Monokai.
So this very first one here.
And as you can see down here,
it will give our code these kind of colors,
and also the VS code editor itself
will have this blue color
that you can see already here in this window.
So if you want to use this color theme as well
to make your editor look exactly the same as mine,
then just go ahead, and once again, download this extension
and then set the color theme using this option here.
And you can also experiment
with some other themes, of course,
down here, again, in the Settings icon.
And then here in color theme,
you can choose one of these light themes
or one of these dark themes.
So VS Code already comes
with a bunch of themes pre-installed, basically.
And so you can try them out as well,
or if you have another preference,
you can also install any other theme that you would like.
Finally, there's just one more small thing
which is this File icon theme.
So this doesn't really matter,
but I set mine to this option here, so Seti.
And so again, if you want your editor
to look just like mine,
you can also go ahead and choose this option.
Okay.
And with that, we are done setting up VS Code for now.
So now you are actually ready
to write your very first line of code.
And so that's exactly what we're gonna do in the next video.
See you there soon.