WEBVTT 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.