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.