1 00:00:01,490 --> 00:00:03,160 And we're gonna start this section 2 00:00:03,160 --> 00:00:05,820 by configuring the VS Code editor 3 00:00:05,820 --> 00:00:08,370 to fit our needs a little bit better 4 00:00:08,370 --> 00:00:11,104 and so that will then make coding a lot easier 5 00:00:11,104 --> 00:00:13,163 in the rest of the course. 6 00:00:14,980 --> 00:00:16,706 And once more, here on my desktop, 7 00:00:16,706 --> 00:00:20,560 I already have the starter files for this section. 8 00:00:20,560 --> 00:00:22,480 So go ahead and get yours 9 00:00:22,480 --> 00:00:24,980 from the GitHub repository as well, 10 00:00:24,980 --> 00:00:26,590 even though in this lecture, 11 00:00:26,590 --> 00:00:29,160 we're not yet gonna need them really. 12 00:00:29,160 --> 00:00:31,260 But let's still open VS Code 13 00:00:31,260 --> 00:00:36,220 because of course, we're gonna need a VS Code window 14 00:00:36,220 --> 00:00:37,623 if we want to configure it. 15 00:00:39,900 --> 00:00:43,030 All right, now here on my Desktop, 16 00:00:43,030 --> 00:00:46,170 of course, I choose the Developer-Skills folder, 17 00:00:46,170 --> 00:00:49,160 which is the folder for this section. 18 00:00:49,160 --> 00:00:52,320 And once again, we have an HTML file, 19 00:00:52,320 --> 00:00:55,553 which already has the script linked to it. 20 00:00:55,553 --> 00:00:58,125 And then here's also the script file, 21 00:00:58,125 --> 00:01:01,130 which has basically nothing. 22 00:01:01,130 --> 00:01:02,968 All I put here to get started 23 00:01:02,968 --> 00:01:05,610 is activating the strict mode, 24 00:01:05,610 --> 00:01:08,020 because remember that from now on, 25 00:01:08,020 --> 00:01:11,650 we should use strict mode in all of the scripts. 26 00:01:11,650 --> 00:01:15,100 And so I left it here already so we don't forget it. 27 00:01:15,100 --> 00:01:18,630 But anyway, let's now start configuring VS Code 28 00:01:18,630 --> 00:01:22,100 and we will start with a tool called Prettier. 29 00:01:22,100 --> 00:01:25,460 And Prettier is an opinionated code formatter, 30 00:01:25,460 --> 00:01:27,410 which means that it makes assumptions 31 00:01:27,410 --> 00:01:30,400 about how good code should look like. 32 00:01:30,400 --> 00:01:32,720 And so if we install it and use it, 33 00:01:32,720 --> 00:01:34,120 then this will make sure 34 00:01:34,120 --> 00:01:36,900 that your code is nicely formatted 35 00:01:36,900 --> 00:01:39,300 and also that it will look exactly the same 36 00:01:39,300 --> 00:01:41,600 as my code looks in the video. 37 00:01:41,600 --> 00:01:43,070 So that's gonna make it easier 38 00:01:43,070 --> 00:01:44,720 for you to take this course 39 00:01:44,720 --> 00:01:47,400 and also, of course, for you to write your own code 40 00:01:47,400 --> 00:01:48,840 in the future. 41 00:01:48,840 --> 00:01:53,510 So this tool is available as a VS Code extension. 42 00:01:53,510 --> 00:01:56,310 So let's click this Extension button here 43 00:01:56,310 --> 00:01:58,220 and then here all you have to do 44 00:01:58,220 --> 00:01:59,550 is to search Prettier 45 00:02:02,040 --> 00:02:04,983 and it's gonna be this first one. 46 00:02:04,983 --> 00:02:07,380 And I, of course, already have it installed. 47 00:02:07,380 --> 00:02:09,500 I just need to enable it. 48 00:02:09,500 --> 00:02:11,210 So I click here on Enable. 49 00:02:11,210 --> 00:02:13,060 But you will have to install it 50 00:02:13,060 --> 00:02:16,260 and then probably reload VS Code. 51 00:02:16,260 --> 00:02:17,750 So I enable it 52 00:02:17,750 --> 00:02:19,700 and so now it is working. 53 00:02:19,700 --> 00:02:21,340 So install it on your end 54 00:02:21,340 --> 00:02:22,910 and reload the browser 55 00:02:22,910 --> 00:02:24,110 and then come back here. 56 00:02:26,620 --> 00:02:29,550 Okay, so let's close the sidebar here again 57 00:02:29,550 --> 00:02:31,070 and so installing this plugin 58 00:02:31,070 --> 00:02:32,453 was the first step. 59 00:02:33,360 --> 00:02:37,010 The second step is to now actually define Prettier 60 00:02:37,010 --> 00:02:39,823 as the default formatter of our code. 61 00:02:40,780 --> 00:02:44,550 So let's go here to Preferences, Settings, 62 00:02:44,550 --> 00:02:46,860 which should look something like this. 63 00:02:46,860 --> 00:02:48,680 And then here in the search bar, 64 00:02:48,680 --> 00:02:52,507 let's search for Default Formatter. 65 00:02:54,767 --> 00:02:58,050 So that's this one here you're looking for. 66 00:02:58,050 --> 00:03:02,960 And you see, we have this huge list of available formatters 67 00:03:02,960 --> 00:03:05,030 but the one that we are looking for 68 00:03:05,030 --> 00:03:08,927 is this esbenp.prettier-vscode. 69 00:03:10,320 --> 00:03:12,060 So this one should be here 70 00:03:12,060 --> 00:03:16,020 in case you successfully installed Prettier before. 71 00:03:16,020 --> 00:03:18,386 And so let's just click this here 72 00:03:18,386 --> 00:03:20,893 and then we should be good to go. 73 00:03:21,913 --> 00:03:22,980 We just need to make sure 74 00:03:22,980 --> 00:03:27,823 that the Format On Save setting is also correctly set. 75 00:03:29,190 --> 00:03:31,110 So Format On Save 76 00:03:31,110 --> 00:03:33,630 and we did this actually already at the beginning 77 00:03:33,630 --> 00:03:36,640 of the course but in case you skipped that video 78 00:03:36,640 --> 00:03:38,867 for some reason, then just make sure 79 00:03:38,867 --> 00:03:42,160 that you actually tick this box here. 80 00:03:42,160 --> 00:03:43,280 All right? 81 00:03:43,280 --> 00:03:47,700 And so with that, Prettier should now actually be working. 82 00:03:47,700 --> 00:03:50,580 So let's just declare a variable down here 83 00:03:50,580 --> 00:03:53,935 and give it a couple of lines of space. 84 00:03:53,935 --> 00:03:58,370 And then simply x equal to something 85 00:03:58,370 --> 00:03:59,570 and then give it a save 86 00:04:00,430 --> 00:04:03,410 and you see that Prettier automatically did some changes 87 00:04:03,410 --> 00:04:04,630 to our code. 88 00:04:04,630 --> 00:04:07,670 So first of all, it removed all these blank lines 89 00:04:07,670 --> 00:04:09,040 that we had here 90 00:04:09,040 --> 00:04:12,100 and it also transformed these single quotes 91 00:04:12,100 --> 00:04:13,740 into double quotes. 92 00:04:13,740 --> 00:04:17,140 Finally, it also added an empty line of code here 93 00:04:17,140 --> 00:04:19,060 at the end, okay? 94 00:04:19,060 --> 00:04:21,310 So this may seem like small changes 95 00:04:21,310 --> 00:04:24,340 but all of them added up throughout all the code 96 00:04:24,340 --> 00:04:26,420 can actually make a big difference. 97 00:04:26,420 --> 00:04:30,230 And again, Prettier is an opinionated code formatter. 98 00:04:30,230 --> 00:04:33,600 So opinionated means that they have a strong opinion 99 00:04:33,600 --> 00:04:35,880 and then basically, when we use the tool, 100 00:04:35,880 --> 00:04:38,130 we have to accept that opinion. 101 00:04:38,130 --> 00:04:39,810 And many people don't like that 102 00:04:39,810 --> 00:04:42,190 but actually, I believe it's a good thing. 103 00:04:42,190 --> 00:04:44,890 It makes it so I don't have to take a decision 104 00:04:44,890 --> 00:04:46,710 on how the code should look like. 105 00:04:46,710 --> 00:04:48,540 For example, some people prefer 106 00:04:48,540 --> 00:04:52,650 to write the if else statement without a space here 107 00:04:52,650 --> 00:04:55,003 and other people like to have a space here. 108 00:04:56,470 --> 00:04:58,270 And let's just write something here. 109 00:05:02,438 --> 00:05:03,810 And so now no matter what we do, 110 00:05:03,810 --> 00:05:07,000 Prettier will take that formatting decision away from us. 111 00:05:07,000 --> 00:05:08,378 So if I save this now, 112 00:05:08,378 --> 00:05:11,890 you see that it automatically inserted that space here. 113 00:05:11,890 --> 00:05:13,580 Even if I don't like it. 114 00:05:13,580 --> 00:05:15,460 So if I remove it and save it again, 115 00:05:15,460 --> 00:05:16,920 it will be back. 116 00:05:16,920 --> 00:05:19,050 All right, but this makes it easier 117 00:05:19,050 --> 00:05:21,120 to make your code consistent 118 00:05:21,120 --> 00:05:23,640 and to make your code also consistent 119 00:05:23,640 --> 00:05:25,240 with other people's code 120 00:05:25,240 --> 00:05:27,730 and in this case, my code that you can see here 121 00:05:27,730 --> 00:05:28,660 in the video. 122 00:05:28,660 --> 00:05:31,100 And so if we both use this tool, 123 00:05:31,100 --> 00:05:33,050 our code will look the same. 124 00:05:33,050 --> 00:05:35,640 Now, there are some things that we can configure 125 00:05:35,640 --> 00:05:37,716 and for example, one thing that I don't like 126 00:05:37,716 --> 00:05:39,610 is the double quotes. 127 00:05:39,610 --> 00:05:41,930 I prefer to use the single quotes 128 00:05:41,930 --> 00:05:45,720 but right now, Prettier will transform every single quotes 129 00:05:45,720 --> 00:05:47,310 to double quotes. 130 00:05:47,310 --> 00:05:49,840 So add single quotes, give it a save 131 00:05:49,840 --> 00:05:52,400 and you'll see now they turned to double quotes. 132 00:05:52,400 --> 00:05:56,490 And some things we can actually configure in Prettier. 133 00:05:56,490 --> 00:05:58,463 So let me show that to you. 134 00:05:59,750 --> 00:06:01,180 So just google Prettier 135 00:06:01,180 --> 00:06:06,180 and probably the first option here will be this tool. 136 00:06:06,270 --> 00:06:08,003 So here we can go to Docs. 137 00:06:09,820 --> 00:06:14,310 And then probably here. 138 00:06:14,310 --> 00:06:16,040 So here we can do Options. 139 00:06:16,040 --> 00:06:18,750 So Configuring Prettier and then Options. 140 00:06:18,750 --> 00:06:21,070 And probably the webpage looks a bit different 141 00:06:21,070 --> 00:06:23,090 by the time you're watching the video 142 00:06:23,090 --> 00:06:24,940 but just search for the options here. 143 00:06:25,940 --> 00:06:27,600 So let's take a look at some of the things 144 00:06:27,600 --> 00:06:28,750 that we can change, 145 00:06:28,750 --> 00:06:31,594 for example, the width of one line 146 00:06:31,594 --> 00:06:36,594 or if Prettier should use tabs or spaces here 147 00:06:38,560 --> 00:06:40,770 or if it should add semicolons or not 148 00:06:41,770 --> 00:06:43,530 but what I'm interested here 149 00:06:43,530 --> 00:06:45,140 is the Quotes. 150 00:06:45,140 --> 00:06:47,120 And so using this option, 151 00:06:47,120 --> 00:06:49,660 we can tell Prettier to use single quotes 152 00:06:49,660 --> 00:06:50,970 instead of double quotes. 153 00:06:50,970 --> 00:06:52,880 And so that's what I want. 154 00:06:52,880 --> 00:06:55,860 Now, how do we actually configure Prettier? 155 00:06:55,860 --> 00:06:57,720 Well, there are multiple ways 156 00:06:57,720 --> 00:07:01,320 but the easiest one is to create a configuration file 157 00:07:01,320 --> 00:07:03,750 in the current project folder. 158 00:07:03,750 --> 00:07:06,543 So let's go back to the sidebar here. 159 00:07:07,800 --> 00:07:10,230 Then we create a new file 160 00:07:10,230 --> 00:07:15,230 and this one is gonna be called .prettier 161 00:07:15,630 --> 00:07:17,143 and then rc. 162 00:07:18,220 --> 00:07:19,370 Okay? 163 00:07:19,370 --> 00:07:23,350 And now here, we basically write this object 164 00:07:23,350 --> 00:07:24,750 and it's not really an object 165 00:07:24,750 --> 00:07:27,410 because this is not JavaScript code. 166 00:07:27,410 --> 00:07:29,953 And so now we write singleQuote. 167 00:07:32,810 --> 00:07:36,260 And actually, VS Code already gives us this option here. 168 00:07:36,260 --> 00:07:38,248 And then as I hit Enter, 169 00:07:38,248 --> 00:07:41,060 actually we get this preset value 170 00:07:41,060 --> 00:07:42,720 but I actually want to change it 171 00:07:42,720 --> 00:07:44,577 to true, okay? 172 00:07:44,577 --> 00:07:47,250 And if I now give this one a save 173 00:07:47,250 --> 00:07:49,183 and then also save this, 174 00:07:50,510 --> 00:07:52,990 then you see that it automatically changed 175 00:07:52,990 --> 00:07:56,080 my double quotes back to single quotes. 176 00:07:56,080 --> 00:07:57,140 Great. 177 00:07:57,140 --> 00:08:00,175 Now, another thing that Prettier does by default 178 00:08:00,175 --> 00:08:03,120 is something in arrow functions. 179 00:08:03,120 --> 00:08:05,600 So let me shows that as well. 180 00:08:05,600 --> 00:08:07,493 And closing the sidebar here, 181 00:08:09,400 --> 00:08:12,973 so const, let's create a calcAge function again. 182 00:08:14,270 --> 00:08:16,440 Then we say birthYear 183 00:08:17,680 --> 00:08:20,140 and then we want to return 2037 184 00:08:21,100 --> 00:08:22,460 minus the birthYear. 185 00:08:22,460 --> 00:08:24,130 So just like we've been using 186 00:08:24,130 --> 00:08:27,750 but now watch what happens when I give it a save. 187 00:08:27,750 --> 00:08:30,930 So you see that Prettier actually wrapped 188 00:08:30,930 --> 00:08:34,250 this single parameter here in parentheses. 189 00:08:34,250 --> 00:08:36,990 However, I actually don't like this. 190 00:08:36,990 --> 00:08:39,040 So when there's just one parameter, 191 00:08:39,040 --> 00:08:41,660 I like to see it without the parentheses 192 00:08:41,660 --> 00:08:44,543 and so that's another thing that we can configure here. 193 00:08:45,980 --> 00:08:49,800 And so that one's called arrowParens 194 00:08:50,810 --> 00:08:54,240 and so now we can choose between always 195 00:08:54,240 --> 00:08:57,370 and well, some other options. 196 00:08:57,370 --> 00:08:59,340 So let's just search that here 197 00:08:59,340 --> 00:09:00,773 with Command + F. 198 00:09:01,840 --> 00:09:02,673 arrowParens. 199 00:09:05,170 --> 00:09:08,260 So we can choose between always and avoid. 200 00:09:08,260 --> 00:09:11,330 And so I want avoid here. 201 00:09:11,330 --> 00:09:12,547 Okay? 202 00:09:12,547 --> 00:09:14,830 And so you can take a look 203 00:09:14,830 --> 00:09:17,463 at this entire list here if you want. 204 00:09:17,463 --> 00:09:20,470 And then you can change your own configuration 205 00:09:20,470 --> 00:09:23,460 to match your preferred coding style. 206 00:09:23,460 --> 00:09:24,930 Okay, and probably by now, 207 00:09:24,930 --> 00:09:27,670 you don't have yet really a coding style 208 00:09:27,670 --> 00:09:30,838 but it's good to know that you can change stuff 209 00:09:30,838 --> 00:09:34,113 that you don't like or that you don't want to see. 210 00:09:35,190 --> 00:09:37,340 So for me, this is the two things 211 00:09:37,340 --> 00:09:39,920 that I always change and as necessary, 212 00:09:39,920 --> 00:09:42,383 I keep adding more stuff from time to time. 213 00:09:43,690 --> 00:09:45,310 So let's close it, give it a save 214 00:09:45,310 --> 00:09:49,230 to see if this change is now reflected here 215 00:09:49,230 --> 00:09:52,091 and yeah, so as I saved it again, 216 00:09:52,091 --> 00:09:55,330 the parentheses here were gone. 217 00:09:55,330 --> 00:09:58,950 And remember that we enabled Format On Save. 218 00:09:58,950 --> 00:10:02,000 And so that's why all these formattings take effect 219 00:10:02,000 --> 00:10:04,490 whenever we save a file. 220 00:10:04,490 --> 00:10:08,950 All right, now if for some reason you cannot make this work, 221 00:10:08,950 --> 00:10:10,190 then don't worry. 222 00:10:10,190 --> 00:10:12,350 You can still progress in the course 223 00:10:12,350 --> 00:10:14,610 without having Prettier working. 224 00:10:14,610 --> 00:10:17,140 That's because this tool does, of course, 225 00:10:17,140 --> 00:10:20,650 not influence how the code itself works. 226 00:10:20,650 --> 00:10:22,580 It's just a visual tool 227 00:10:22,580 --> 00:10:25,810 that only changes how the code looks. 228 00:10:25,810 --> 00:10:28,390 Anyway, this was already a big step 229 00:10:28,390 --> 00:10:31,660 on making coding a little bit easier for us. 230 00:10:31,660 --> 00:10:33,800 But now I want to show you something else, 231 00:10:33,800 --> 00:10:37,370 which is to basically automate something very boring 232 00:10:37,370 --> 00:10:38,790 that we're doing all the time. 233 00:10:38,790 --> 00:10:41,480 And that is writing console.log. 234 00:10:41,480 --> 00:10:43,680 So whenever we want to log something, 235 00:10:43,680 --> 00:10:47,560 we have to write all of this console.log 236 00:10:47,560 --> 00:10:49,130 and do all this work 237 00:10:49,130 --> 00:10:52,300 but in VS Code, we can configure snippets, 238 00:10:52,300 --> 00:10:55,080 which can take that work away from us. 239 00:10:55,080 --> 00:10:57,030 So let me show you how. 240 00:10:57,030 --> 00:10:59,860 So we go here in the menu 241 00:10:59,860 --> 00:11:02,720 into this Preferences submenu 242 00:11:02,720 --> 00:11:06,020 and then here we can define User Snippets. 243 00:11:06,020 --> 00:11:07,470 So click on that. 244 00:11:07,470 --> 00:11:09,930 And then you can open one of these files 245 00:11:09,930 --> 00:11:11,660 but the best thing to do 246 00:11:11,660 --> 00:11:14,683 is to just create a New Global Snippets File. 247 00:11:15,650 --> 00:11:18,190 So click that and then just give it a name 248 00:11:18,190 --> 00:11:20,350 and it doesn't really matter. 249 00:11:20,350 --> 00:11:22,293 I'm just gonna call it jonas here. 250 00:11:23,360 --> 00:11:26,490 And so here we can define a couple of snippets 251 00:11:26,490 --> 00:11:27,950 and remember that the snippet 252 00:11:27,950 --> 00:11:30,440 that we want to define is simply one 253 00:11:30,440 --> 00:11:34,400 that automatically writes console.log for us. 254 00:11:34,400 --> 00:11:38,030 And actually, there's already an example snippet down here, 255 00:11:38,030 --> 00:11:40,730 which basically does just that. 256 00:11:40,730 --> 00:11:42,200 So it's this here 257 00:11:42,200 --> 00:11:45,480 and so let's just uncomment all of this. 258 00:11:45,480 --> 00:11:47,320 So again with Command + slash 259 00:11:48,480 --> 00:11:50,820 and so this here is the name of the snippet. 260 00:11:50,820 --> 00:11:53,070 Then here we say that it works in JavaScript 261 00:11:53,070 --> 00:11:54,830 and in TypeScript. 262 00:11:54,830 --> 00:11:57,980 This is the command that will basically trigger the snippet. 263 00:11:57,980 --> 00:12:00,560 And here I like to use cl. 264 00:12:00,560 --> 00:12:03,100 So whenever we write cl in the code, 265 00:12:03,100 --> 00:12:06,520 it will then expand that to console.log. 266 00:12:06,520 --> 00:12:10,010 Then here is the code that will actually be written. 267 00:12:10,010 --> 00:12:12,703 And here get rid of this second line. 268 00:12:13,810 --> 00:12:16,630 And then here, also get rid of all of this 269 00:12:16,630 --> 00:12:18,880 because I found that this is the best way 270 00:12:18,880 --> 00:12:20,370 to make this work. 271 00:12:20,370 --> 00:12:21,810 And it's not really important 272 00:12:21,810 --> 00:12:24,140 that you understand how this works. 273 00:12:24,140 --> 00:12:27,650 This is just a recipe that I want you to follow here 274 00:12:27,650 --> 00:12:30,313 just to make our life's coding a little bit easier. 275 00:12:31,430 --> 00:12:32,830 So then give it a save 276 00:12:32,830 --> 00:12:34,578 and once you head back to your script 277 00:12:34,578 --> 00:12:37,370 and now write cl, 278 00:12:37,370 --> 00:12:40,710 which remember is this prefix. 279 00:12:40,710 --> 00:12:42,763 But you could have chosen anything else. 280 00:12:44,280 --> 00:12:45,253 But in my case, 281 00:12:46,230 --> 00:12:48,260 whenever I write now cl 282 00:12:48,260 --> 00:12:50,010 and then hit Enter, 283 00:12:50,010 --> 00:12:52,030 it will give me console.log. 284 00:12:52,030 --> 00:12:54,420 And then all I need to do is to go back 285 00:12:54,420 --> 00:12:58,070 and then write whatever I want to log here. 286 00:12:58,070 --> 00:13:02,450 Now, here we can also like define this $1 287 00:13:03,400 --> 00:13:05,210 with just the way it was before 288 00:13:05,210 --> 00:13:08,690 and then this will place the cursor between the parentheses. 289 00:13:08,690 --> 00:13:10,670 But then I found that when you do that, 290 00:13:10,670 --> 00:13:13,970 the autocomplete in VS Code does no longer work 291 00:13:13,970 --> 00:13:15,720 and so that's why I don't use that. 292 00:13:17,090 --> 00:13:19,240 So you see, now the cursor is here 293 00:13:19,240 --> 00:13:21,420 but then autocomplete does not work 294 00:13:21,420 --> 00:13:23,307 and in this case, you can't really see that 295 00:13:23,307 --> 00:13:26,250 but if this variable name was a little bit longer, 296 00:13:26,250 --> 00:13:27,353 xyzabc, 297 00:13:30,800 --> 00:13:33,240 and then xyz, 298 00:13:33,240 --> 00:13:35,800 so you see that the autocompletion is not working. 299 00:13:35,800 --> 00:13:38,410 I would have to go down and go up again 300 00:13:38,410 --> 00:13:40,323 and only then it would work. 301 00:13:44,330 --> 00:13:46,700 Okay and so let's just remove that 302 00:13:46,700 --> 00:13:47,943 and call it a day. 303 00:13:49,200 --> 00:13:50,710 Okay, so from now on, 304 00:13:50,710 --> 00:13:53,520 I will no longer manually type console.log, 305 00:13:53,520 --> 00:13:56,460 I will always just do this. 306 00:13:56,460 --> 00:13:57,370 Okay? 307 00:13:57,370 --> 00:13:58,340 And now to finish, 308 00:13:58,340 --> 00:14:00,810 let's just go maybe a little bit 309 00:14:00,810 --> 00:14:03,740 over my extensions that I have here 310 00:14:03,740 --> 00:14:06,010 just to show you what I use. 311 00:14:06,010 --> 00:14:09,310 So let's remove that search text there 312 00:14:10,190 --> 00:14:13,710 and so these first two are about HTML development 313 00:14:13,710 --> 00:14:16,710 and I'm gonna show them to you in the next section. 314 00:14:16,710 --> 00:14:18,700 Then these don't really matter. 315 00:14:18,700 --> 00:14:23,030 ESLint is a tool that we're gonna use later. 316 00:14:23,030 --> 00:14:25,763 Image Preview is also good for HTML. 317 00:14:28,523 --> 00:14:31,280 Then Monokai Pro is the theme that I'm using. 318 00:14:31,280 --> 00:14:32,840 Remember. 319 00:14:32,840 --> 00:14:34,283 Then, of course, Prettier. 320 00:14:35,250 --> 00:14:37,220 Then I have Settings Sync, 321 00:14:37,220 --> 00:14:39,850 which is very useful to synchronize settings 322 00:14:39,850 --> 00:14:42,760 between different VS Code installations. 323 00:14:42,760 --> 00:14:44,930 For example, if you have multiple computers 324 00:14:44,930 --> 00:14:48,000 or multiple accounts on your computer. 325 00:14:48,000 --> 00:14:50,330 And finally, one that I use all the time 326 00:14:50,330 --> 00:14:52,010 is TODO Highlight. 327 00:14:52,010 --> 00:14:55,555 So this allows me to highlight parts of a text. 328 00:14:55,555 --> 00:15:00,060 So for example, I can do something like this. 329 00:15:00,060 --> 00:15:03,173 So when I write BUG in the comment, for example, 330 00:15:05,000 --> 00:15:07,550 then it gives me this nice red highlight 331 00:15:08,490 --> 00:15:10,483 or FIXME is another one. 332 00:15:11,760 --> 00:15:13,410 So let me show you my settings here 333 00:15:13,410 --> 00:15:17,940 that will show how I do that. 334 00:15:17,940 --> 00:15:22,540 So that is Preferences and Settings 335 00:15:22,540 --> 00:15:25,530 and then we need to go here into this icon 336 00:15:25,530 --> 00:15:27,600 and again, by the time you're watching this, 337 00:15:27,600 --> 00:15:29,010 this might have changed 338 00:15:29,010 --> 00:15:31,910 but what matters is that you need to open the settings 339 00:15:31,910 --> 00:15:33,253 in a JSON format. 340 00:15:34,140 --> 00:15:37,270 And so this shows all the settings that I have. 341 00:15:37,270 --> 00:15:42,270 And so here is how I defined these colored texts. 342 00:15:42,830 --> 00:15:45,690 So you need to install the TODO Highlight extension 343 00:15:45,690 --> 00:15:46,970 and then in your settings, 344 00:15:46,970 --> 00:15:48,870 you just write this kind of code 345 00:15:48,870 --> 00:15:51,220 to define different colored texts 346 00:15:51,220 --> 00:15:52,903 for different texts. 347 00:15:54,149 --> 00:15:56,583 Okay, so a very useful one again. 348 00:15:58,290 --> 00:16:00,980 Yeah, I think that's enough for this video. 349 00:16:00,980 --> 00:16:03,262 This one was not really about coding or anything. 350 00:16:03,262 --> 00:16:06,760 It's just to set us up for the rest of the course 351 00:16:06,760 --> 00:16:09,900 and also so that you start getting a feel for a little bit 352 00:16:09,900 --> 00:16:13,970 of the tooling that we have in the JavaScript ecosystem. 353 00:16:13,970 --> 00:16:16,030 All right, and actually in the next lecture, 354 00:16:16,030 --> 00:16:17,910 we will continue doing that. 355 00:16:17,910 --> 00:16:19,673 So I see you there in a second.