Original subtitles

1 1

And we're gonna start this section 2

2

by configuring the VS Code editor 3

3

to fit our needs a little bit better 4

4

and so that will then make coding a lot easier 5

5

in the rest of the course. 6

6

And once more, here on my desktop, 7

7

I already have the starter files for this section. 8

8

So go ahead and get yours 9

9

from the GitHub repository as well, 10

10

even though in this lecture, 11

11

we're not yet gonna need them really. 12

12

But let's still open VS Code 13

13

because of course, we're gonna need a VS Code window 14

14

if we want to configure it. 15

15

All right, now here on my Desktop, 16

16

of course, I choose the Developer-Skills folder, 17

17

which is the folder for this section. 18

18

And once again, we have an HTML file, 19

19

which already has the script linked to it. 20

20

And then here's also the script file, 21

21

which has basically nothing. 22

22

All I put here to get started 23

23

is activating the strict mode, 24

24

because remember that from now on, 25

25

we should use strict mode in all of the scripts. 26

26

And so I left it here already so we don't forget it. 27

27

But anyway, let's now start configuring VS Code 28

28

and we will start with a tool called Prettier. 29

29

And Prettier is an opinionated code formatter, 30

30

which means that it makes assumptions 31

31

about how good code should look like. 32

32

And so if we install it and use it, 33

33

then this will make sure 34

34

that your code is nicely formatted 35

35

and also that it will look exactly the same 36

36

as my code looks in the video. 37

37

So that's gonna make it easier 38

38

for you to take this course 39

39

and also, of course, for you to write your own code 40

40

in the future. 41

41

So this tool is available as a VS Code extension. 42

42

So let's click this Extension button here 43

43

and then here all you have to do 44

44

is to search Prettier 45

45

and it's gonna be this first one. 46

46

And I, of course, already have it installed. 47

47

I just need to enable it. 48

48

So I click here on Enable. 49

49

But you will have to install it 50

50

and then probably reload VS Code. 51

51

So I enable it 52

52

and so now it is working. 53

53

So install it on your end 54

54

and reload the browser 55

55

and then come back here. 56

56

Okay, so let's close the sidebar here again 57

57

and so installing this plugin 58

58

was the first step. 59

59

The second step is to now actually define Prettier 60

60

as the default formatter of our code. 61

61

So let's go here to Preferences, Settings, 62

62

which should look something like this. 63

63

And then here in the search bar, 64

64

let's search for Default Formatter. 65

65

So that's this one here you're looking for. 66

66

And you see, we have this huge list of available formatters 67

67

but the one that we are looking for 68

68

is this esbenp.prettier-vscode. 69

69

So this one should be here 70

70

in case you successfully installed Prettier before. 71

71

And so let's just click this here 72

72

and then we should be good to go. 73

73

We just need to make sure 74

74

that the Format On Save setting is also correctly set. 75

75

So Format On Save 76

76

and we did this actually already at the beginning 77

77

of the course but in case you skipped that video 78

78

for some reason, then just make sure 79

79

that you actually tick this box here. 80

80

All right? 81

81

And so with that, Prettier should now actually be working. 82

82

So let's just declare a variable down here 83

83

and give it a couple of lines of space. 84

84

And then simply x equal to something 85

85

and then give it a save 86

86

and you see that Prettier automatically did some changes 87

87

to our code. 88

88

So first of all, it removed all these blank lines 89

89

that we had here 90

90

and it also transformed these single quotes 91

91

into double quotes. 92

92

Finally, it also added an empty line of code here 93

93

at the end, okay? 94

94

So this may seem like small changes 95

95

but all of them added up throughout all the code 96

96

can actually make a big difference. 97

97

And again, Prettier is an opinionated code formatter. 98

98

So opinionated means that they have a strong opinion 99

99

and then basically, when we use the tool, 100

100

we have to accept that opinion. 101

101

And many people don't like that 102

102

but actually, I believe it's a good thing. 103

103

It makes it so I don't have to take a decision 104

104

on how the code should look like. 105

105

For example, some people prefer 106

106

to write the if else statement without a space here 107

107

and other people like to have a space here. 108

108

And let's just write something here. 109

109

And so now no matter what we do, 110

110

Prettier will take that formatting decision away from us. 111

111

So if I save this now, 112

112

you see that it automatically inserted that space here. 113

113

Even if I don't like it. 114

114

So if I remove it and save it again, 115

115

it will be back. 116

116

All right, but this makes it easier 117

117

to make your code consistent 118

118

and to make your code also consistent 119

119

with other people's code 120

120

and in this case, my code that you can see here 121

121

in the video. 122

122

And so if we both use this tool, 123

123

our code will look the same. 124

124

Now, there are some things that we can configure 125

125

and for example, one thing that I don't like 126

126

is the double quotes. 127

127

I prefer to use the single quotes 128

128

but right now, Prettier will transform every single quotes 129

129

to double quotes. 130

130

So add single quotes, give it a save 131

131

and you'll see now they turned to double quotes. 132

132

And some things we can actually configure in Prettier. 133

133

So let me show that to you. 134

134

So just google Prettier 135

135

and probably the first option here will be this tool. 136

136

So here we can go to Docs. 137

137

And then probably here. 138

138

So here we can do Options. 139

139

So Configuring Prettier and then Options. 140

140

And probably the webpage looks a bit different 141

141

by the time you're watching the video 142

142

but just search for the options here. 143

143

So let's take a look at some of the things 144

144

that we can change, 145

145

for example, the width of one line 146

146

or if Prettier should use tabs or spaces here 147

147

or if it should add semicolons or not 148

148

but what I'm interested here 149

149

is the Quotes. 150

150

And so using this option, 151

151

we can tell Prettier to use single quotes 152

152

instead of double quotes. 153

153

And so that's what I want. 154

154

Now, how do we actually configure Prettier? 155

155

Well, there are multiple ways 156

156

but the easiest one is to create a configuration file 157

157

in the current project folder. 158

158

So let's go back to the sidebar here. 159

159

Then we create a new file 160

160

and this one is gonna be called .prettier 161

161

and then rc. 162

162

Okay? 163

163

And now here, we basically write this object 164

164

and it's not really an object 165

165

because this is not JavaScript code. 166

166

And so now we write singleQuote. 167

167

And actually, VS Code already gives us this option here. 168

168

And then as I hit Enter, 169

169

actually we get this preset value 170

170

but I actually want to change it 171

171

to true, okay? 172

172

And if I now give this one a save 173

173

and then also save this, 174

174

then you see that it automatically changed 175

175

my double quotes back to single quotes. 176

176

Great. 177

177

Now, another thing that Prettier does by default 178

178

is something in arrow functions. 179

179

So let me shows that as well. 180

180

And closing the sidebar here, 181

181

so const, let's create a calcAge function again. 182

182

Then we say birthYear 183

183

and then we want to return 2037 184

184

minus the birthYear. 185

185

So just like we've been using 186

186

but now watch what happens when I give it a save. 187

187

So you see that Prettier actually wrapped 188

188

this single parameter here in parentheses. 189

189

However, I actually don't like this. 190

190

So when there's just one parameter, 191

191

I like to see it without the parentheses 192

192

and so that's another thing that we can configure here. 193

193

And so that one's called arrowParens 194

194

and so now we can choose between always 195

195

and well, some other options. 196

196

So let's just search that here 197

197

with Command + F. 198

198

arrowParens. 199

199

So we can choose between always and avoid. 200

200

And so I want avoid here. 201

201

Okay? 202

202

And so you can take a look 203

203

at this entire list here if you want. 204

204

And then you can change your own configuration 205

205

to match your preferred coding style. 206

206

Okay, and probably by now, 207

207

you don't have yet really a coding style 208

208

but it's good to know that you can change stuff 209

209

that you don't like or that you don't want to see. 210

210

So for me, this is the two things 211

211

that I always change and as necessary, 212

212

I keep adding more stuff from time to time. 213

213

So let's close it, give it a save 214

214

to see if this change is now reflected here 215

215

and yeah, so as I saved it again, 216

216

the parentheses here were gone. 217

217

And remember that we enabled Format On Save. 218

218

And so that's why all these formattings take effect 219

219

whenever we save a file. 220

220

All right, now if for some reason you cannot make this work, 221

221

then don't worry. 222

222

You can still progress in the course 223

223

without having Prettier working. 224

224

That's because this tool does, of course, 225

225

not influence how the code itself works. 226

226

It's just a visual tool 227

227

that only changes how the code looks. 228

228

Anyway, this was already a big step 229

229

on making coding a little bit easier for us. 230

230

But now I want to show you something else, 231

231

which is to basically automate something very boring 232

232

that we're doing all the time. 233

233

And that is writing console.log. 234

234

So whenever we want to log something, 235

235

we have to write all of this console.log 236

236

and do all this work 237

237

but in VS Code, we can configure snippets, 238

238

which can take that work away from us. 239

239

So let me show you how. 240

240

So we go here in the menu 241

241

into this Preferences submenu 242

242

and then here we can define User Snippets. 243

243

So click on that. 244

244

And then you can open one of these files 245

245

but the best thing to do 246

246

is to just create a New Global Snippets File. 247

247

So click that and then just give it a name 248

248

and it doesn't really matter. 249

249

I'm just gonna call it jonas here. 250

250

And so here we can define a couple of snippets 251

251

and remember that the snippet 252

252

that we want to define is simply one 253

253

that automatically writes console.log for us. 254

254

And actually, there's already an example snippet down here, 255

255

which basically does just that. 256

256

So it's this here 257

257

and so let's just uncomment all of this. 258

258

So again with Command + slash 259

259

and so this here is the name of the snippet. 260

260

Then here we say that it works in JavaScript 261

261

and in TypeScript. 262

262

This is the command that will basically trigger the snippet. 263

263

And here I like to use cl. 264

264

So whenever we write cl in the code, 265

265

it will then expand that to console.log. 266

266

Then here is the code that will actually be written. 267

267

And here get rid of this second line. 268

268

And then here, also get rid of all of this 269

269

because I found that this is the best way 270

270

to make this work. 271

271

And it's not really important 272

272

that you understand how this works. 273

273

This is just a recipe that I want you to follow here 274

274

just to make our life's coding a little bit easier. 275

275

So then give it a save 276

276

and once you head back to your script 277

277

and now write cl, 278

278

which remember is this prefix. 279

279

But you could have chosen anything else. 280

280

But in my case, 281

281

whenever I write now cl 282

282

and then hit Enter, 283

283

it will give me console.log. 284

284

And then all I need to do is to go back 285

285

and then write whatever I want to log here. 286

286

Now, here we can also like define this $1 287

287

with just the way it was before 288

288

and then this will place the cursor between the parentheses. 289

289

But then I found that when you do that, 290

290

the autocomplete in VS Code does no longer work 291

291

and so that's why I don't use that. 292

292

So you see, now the cursor is here 293

293

but then autocomplete does not work 294

294

and in this case, you can't really see that 295

295

but if this variable name was a little bit longer, 296

296

xyzabc, 297

297

and then xyz, 298

298

so you see that the autocompletion is not working. 299

299

I would have to go down and go up again 300

300

and only then it would work. 301

301

Okay and so let's just remove that 302

302

and call it a day. 303

303

Okay, so from now on, 304

304

I will no longer manually type console.log, 305

305

I will always just do this. 306

306

Okay? 307

307

And now to finish, 308

308

let's just go maybe a little bit 309

309

over my extensions that I have here 310

310

just to show you what I use. 311

311

So let's remove that search text there 312

312

and so these first two are about HTML development 313

313

and I'm gonna show them to you in the next section. 314

314

Then these don't really matter. 315

315

ESLint is a tool that we're gonna use later. 316

316

Image Preview is also good for HTML. 317

317

Then Monokai Pro is the theme that I'm using. 318

318

Remember. 319

319

Then, of course, Prettier. 320

320

Then I have Settings Sync, 321

321

which is very useful to synchronize settings 322

322

between different VS Code installations. 323

323

For example, if you have multiple computers 324

324

or multiple accounts on your computer. 325

325

And finally, one that I use all the time 326

326

is TODO Highlight. 327

327

So this allows me to highlight parts of a text. 328

328

So for example, I can do something like this. 329

329

So when I write BUG in the comment, for example, 330

330

then it gives me this nice red highlight 331

331

or FIXME is another one. 332

332

So let me show you my settings here 333

333

that will show how I do that. 334

334

So that is Preferences and Settings 335

335

and then we need to go here into this icon 336

336

and again, by the time you're watching this, 337

337

this might have changed 338

338

but what matters is that you need to open the settings 339

339

in a JSON format. 340

340

And so this shows all the settings that I have. 341

341

And so here is how I defined these colored texts. 342

342

So you need to install the TODO Highlight extension 343

343

and then in your settings, 344

344

you just write this kind of code 345

345

to define different colored texts 346

346

for different texts. 347

347

Okay, so a very useful one again. 348

348

Yeah, I think that's enough for this video. 349

349

This one was not really about coding or anything. 350

350

It's just to set us up for the rest of the course 351

351

and also so that you start getting a feel for a little bit 352

352

of the tooling that we have in the JavaScript ecosystem. 353

353

All right, and actually in the next lecture, 354

354

we will continue doing that. 355

355

So I see you there in a second.