Original subtitles

Now before we can write any code,

we need to install and configure a code editor.

So a code editor is the main tool for any developer

and we use it as the name says to write our actual code.

And so let's now go download a code editor.

And the one that I advise everyone to use

is Visual Studio Code or VS Code for short.

So this is in my opinion,

the best code editor by far that exists.

And that's not just my own opinion.

So VS Code is right now by far the most popular

and most widely used code editor and that is for a reason.

It simply is the best and easiest to use and of course,

it is completely free.

Now there are alternatives if you don't like VS Code

for some reason.

So you can use Adam or you can use something like Brackets

as well, which is the code editor that I used

to teach a previous version of this course.

But again, I'm going to use VS Code in this course.

And so, I really advise you to follow this course,

using the exact same code editor to make everything easier

for you to follow.

So again, this code editor is completely free

and it works on every platform.

So just download whatever installer that you need

for your own platform, then install of course,

that code editor on your computer.

And once you're done, come back to this video,

so that we can together set it up a little bit,

just so that we can get started in the next section.

Okay, so I hope that you managed to install VS Code

on your system and as you open it up,

it should look something like this.

Now, the colors should probably all be different,

but we will fix that in a second.

And maybe this welcome screen also looks different.

And maybe this icons here

because you might've installed the editor sometime

after I recorded this video.

But anyway, the main things should still work the same.

And so let's actually start by installing a theme.

So a theme is basically all the colors that you see

are on the screen.

And also the color is in the actual code

that you're going to write.

Okay, now you don't need to install a theme.

So you can simply change one of the themes

that is already included in VS Code.

So just click down here on this icon and then color theme.

And then here, you can try one of these out.

And so if you like one of them,

you can simply keep that one.

But as you see, the theme that I have is this monokai pro

and this one was not included by default by VS Code.

And so if you want to install the same theme as I have,

then simply come here to this extensions tab

and then search for monokai pro.

Okay, then it's this first one here.

And then you can simply, probably somewhere here,

click on download.

Now this theme is actually a paid theme that you can buy

for about 10 U.S. dollars or so.

However, you can actually also use the theme

for free forever.

It will then just ask you every couple of days

for you to buy it.

But for me, that has never been a big problem.

Now, I just wanted to quickly mention that I'm not

in any way affiliated with the theme

and that this is not an advertisement.

So this is simply the theme that I love

and that I use every single day.

But of course, you can use a different theme

or a theme that you have already been using yourself.

But if you like to theme,

then you can support the creator or you can use the theme

for free or you can, of course also use another theme.

And one other theme that is very similar

and which actually already comes with VS Code

is monokai classic.

So it's this one.

So the colors here look a little bit different,

but the monokai pro theme that I use is actually based

on this one.

And so therefore, colors are quite similar.

And so therefore, this one is also a good pick

in case you want to use a very similar theme to mine,

but don't want to use monokai pro,

but I'm gonna set it back to monokai pro now.

And so that's it about the theme.

And so, let's not move on and also talk

about VS Code settings.

And so here, I'm going to show you a couple of settings

that I'm using in the course videos

and that you should probably use as well

to make it easier for you to follow the videos

and also to code on your own later on.

So the first setting is this auto save setting

that you should set to on focus change.

Okay and so, what this will do is that whenever

you leave the code editor or you go to some other file,

then it will automatically save that file without you having

to do anything.

And so, that's very helpful.

Now, if this isn't showing up here for you,

up here, you can simply search for everything.

So you can simply search auto save like this.

And then again, change it to unfocused change.

Then you could also change the font size,

but that's not really important for you.

Then another one is this multi cursor modifier.

And this one sounds a bit weird,

but you can simply set it to control command.

Or you can leave it at alt.

So just when you need it,

just know which of the two you selected.

But for now, again, this is not important.

I will only start using it a bit later.

Then I also have the word wrap turned on,

but again, that's not that important.

Okay, so I think those are actually the most important ones.

There's just another one that you need to change.

And that is called format on save.

All right, so just turn this one here on,

which says that a formatter must be available and by now,

it is not, but in one of the next sections,

we will actually install a formatter

to automatically format our code.

And by then, this setting here must be turned on.

Okay and that's actually it for this lecture already.

Now, just notice that I'm working on a Mac here,

but everything will work exactly the same on Windows

and on Linux.

So this VS Code editor as I mentioned earlier,

works just the same on all the platforms.

Now, just one final and small adjustment that we can make,

which I just remembered

is that besides changing the main color theme,

we can also change the theme of the file icons.

And so again, if you want your VS Code

to look exactly the same as mine,

then you can select these Seti icons here.

So by default, I think it should be this minimal,

but I prefer these ones here.

And so, by selecting this one here,

then your code editor

will probably look exactly the same as mine.

All right and with that, we are actually ready to move on.

Just make sure that you also have the latest version

of Google Chrome installed on your computer

because that is going to be the browser

in which we will be testing our code.

All right, but with that,

we are now really done with this video.

And so, I'll see you in the next one.