Original subtitles

1 1

Now before we can write any code, 2

2

we need to install and configure a code editor. 3

3

So a code editor is the main tool for any developer 4

4

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

5

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

6

And the one that I advise everyone to use 7

7

is Visual Studio Code or VS Code for short. 8

8

So this is in my opinion, 9

9

the best code editor by far that exists. 10

10

And that's not just my own opinion. 11

11

So VS Code is right now by far the most popular 12

12

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

13

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

14

it is completely free. 15

15

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

16

for some reason. 17

17

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

18

as well, which is the code editor that I used 19

19

to teach a previous version of this course. 20

20

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

21

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

22

using the exact same code editor to make everything easier 23

23

for you to follow. 24

24

So again, this code editor is completely free 25

25

and it works on every platform. 26

26

So just download whatever installer that you need 27

27

for your own platform, then install of course, 28

28

that code editor on your computer. 29

29

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

30

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

31

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

32

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

33

on your system and as you open it up, 34

34

it should look something like this. 35

35

Now, the colors should probably all be different, 36

36

but we will fix that in a second. 37

37

And maybe this welcome screen also looks different. 38

38

And maybe this icons here 39

39

because you might've installed the editor sometime 40

40

after I recorded this video. 41

41

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

42

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

43

So a theme is basically all the colors that you see 44

44

are on the screen. 45

45

And also the color is in the actual code 46

46

that you're going to write. 47

47

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

48

So you can simply change one of the themes 49

49

that is already included in VS Code. 50

50

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

51

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

52

And so if you like one of them, 53

53

you can simply keep that one. 54

54

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

55

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

56

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

57

then simply come here to this extensions tab 58

58

and then search for monokai pro. 59

59

Okay, then it's this first one here. 60

60

And then you can simply, probably somewhere here, 61

61

click on download. 62

62

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

63

for about 10 U.S. dollars or so. 64

64

However, you can actually also use the theme 65

65

for free forever. 66

66

It will then just ask you every couple of days 67

67

for you to buy it. 68

68

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

69

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

70

in any way affiliated with the theme 71

71

and that this is not an advertisement. 72

72

So this is simply the theme that I love 73

73

and that I use every single day. 74

74

But of course, you can use a different theme 75

75

or a theme that you have already been using yourself. 76

76

But if you like to theme, 77

77

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

78

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

79

And one other theme that is very similar 80

80

and which actually already comes with VS Code 81

81

is monokai classic. 82

82

So it's this one. 83

83

So the colors here look a little bit different, 84

84

but the monokai pro theme that I use is actually based 85

85

on this one. 86

86

And so therefore, colors are quite similar. 87

87

And so therefore, this one is also a good pick 88

88

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

89

but don't want to use monokai pro, 90

90

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

91

And so that's it about the theme. 92

92

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

93

about VS Code settings. 94

94

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

95

that I'm using in the course videos 96

96

and that you should probably use as well 97

97

to make it easier for you to follow the videos 98

98

and also to code on your own later on. 99

99

So the first setting is this auto save setting 100

100

that you should set to on focus change. 101

101

Okay and so, what this will do is that whenever 102

102

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

103

then it will automatically save that file without you having 104

104

to do anything. 105

105

And so, that's very helpful. 106

106

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

107

up here, you can simply search for everything. 108

108

So you can simply search auto save like this. 109

109

And then again, change it to unfocused change. 110

110

Then you could also change the font size, 111

111

but that's not really important for you. 112

112

Then another one is this multi cursor modifier. 113

113

And this one sounds a bit weird, 114

114

but you can simply set it to control command. 115

115

Or you can leave it at alt. 116

116

So just when you need it, 117

117

just know which of the two you selected. 118

118

But for now, again, this is not important. 119

119

I will only start using it a bit later. 120

120

Then I also have the word wrap turned on, 121

121

but again, that's not that important. 122

122

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

123

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

124

And that is called format on save. 125

125

All right, so just turn this one here on, 126

126

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

127

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

128

we will actually install a formatter 129

129

to automatically format our code. 130

130

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

131

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

132

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

133

but everything will work exactly the same on Windows 134

134

and on Linux. 135

135

So this VS Code editor as I mentioned earlier, 136

136

works just the same on all the platforms. 137

137

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

138

which I just remembered 139

139

is that besides changing the main color theme, 140

140

we can also change the theme of the file icons. 141

141

And so again, if you want your VS Code 142

142

to look exactly the same as mine, 143

143

then you can select these Seti icons here. 144

144

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

145

but I prefer these ones here. 146

146

And so, by selecting this one here, 147

147

then your code editor 148

148

will probably look exactly the same as mine. 149

149

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

150

Just make sure that you also have the latest version 151

151

of Google Chrome installed on your computer 152

152

because that is going to be the browser 153

153

in which we will be testing our code. 154

154

All right, but with that, 155

155

we are now really done with this video. 156

156

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