Original subtitles

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 code like HTML and CSS

in a very easy way.

And since this course is probably your first contact with

any coding and 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 going to use in this course

is called visual studio code from Microsoft.

And has 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 be this very first result.

And of course, vs code is available for free

and for all platforms out there.

So Mac OS, 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 a 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 going to 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 it 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 esbnp.prettier-vs coat.

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 safe setting.

So auto safe, we need to set it to onFocusChange.

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 onFocusChange 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 kinds 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 these file I can 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, then that we are done setting up vs code for now.

So now you're actually ready to write

your very first line of code.

And so that's exactly what we're going to do

in the next video.

See you there soon.