1 00:00:01,270 --> 00:00:05,030 So this section and the node form project 2 00:00:05,030 --> 00:00:07,030 are now basically completed, 3 00:00:07,030 --> 00:00:09,340 but in this video I wanted to very quickly 4 00:00:09,340 --> 00:00:11,860 go over my VS code setup 5 00:00:11,860 --> 00:00:15,683 and also together with you set up the Prettier extension. 6 00:00:17,320 --> 00:00:20,960 And so these are the extensions that I have installed 7 00:00:20,960 --> 00:00:24,230 in my VS code and not all of them are going to be relevant 8 00:00:24,230 --> 00:00:25,540 for this course, 9 00:00:25,540 --> 00:00:28,060 but whenever there is a relevant extension 10 00:00:28,060 --> 00:00:31,600 I will mention it by the time that it is useful. 11 00:00:31,600 --> 00:00:35,180 For example this .env extension here will be useful 12 00:00:35,180 --> 00:00:39,520 to highlight environmental variables in a .n file. 13 00:00:39,520 --> 00:00:42,560 So let's just quickly go over some of them. 14 00:00:42,560 --> 00:00:46,310 For example ESLint is useful to find bugs in our code 15 00:00:46,310 --> 00:00:49,320 and actually we're going to set up ESLint with node a bit 16 00:00:49,320 --> 00:00:51,163 later in another section. 17 00:00:52,460 --> 00:00:54,830 We have image preview which is a very nice 18 00:00:54,830 --> 00:00:57,250 small extension to preview images. 19 00:00:57,250 --> 00:01:01,510 And maybe you have noticed that when we were doing this, 20 00:01:01,510 --> 00:01:02,373 for example, 21 00:01:03,210 --> 00:01:06,510 the sample here you see that here on the left side 22 00:01:06,510 --> 00:01:10,140 it displays all the images that we include in a website. 23 00:01:10,140 --> 00:01:12,123 So in this example it is this one. 24 00:01:13,850 --> 00:01:18,170 All right so just something small that I found very useful. 25 00:01:18,170 --> 00:01:20,150 What else do we have here? 26 00:01:20,150 --> 00:01:22,550 We have Prettier and so this is the one 27 00:01:22,550 --> 00:01:25,400 that I want to config with you in this video, 28 00:01:25,400 --> 00:01:27,760 but for now let's go over 29 00:01:27,760 --> 00:01:28,930 some other here. 30 00:01:28,930 --> 00:01:32,400 So Pug is a language that we're going to use later 31 00:01:32,400 --> 00:01:33,860 to build templates 32 00:01:33,860 --> 00:01:36,620 and so it's useful to have this beautify 33 00:01:36,620 --> 00:01:39,090 extension for that one as well. 34 00:01:39,090 --> 00:01:43,680 Then I also have TabNine, which does some nice magic 35 00:01:43,680 --> 00:01:46,010 auto completer sometimes. 36 00:01:46,010 --> 00:01:48,150 Then I also have TODO Highlight, 37 00:01:48,150 --> 00:01:50,060 which is very useful to do 38 00:01:50,060 --> 00:01:51,510 this kind of 39 00:01:51,510 --> 00:01:52,870 magic here. 40 00:01:52,870 --> 00:01:54,320 For example when I have TODO, 41 00:01:55,300 --> 00:01:57,970 it will highlight it in this green color 42 00:01:57,970 --> 00:01:59,810 or if I write BUG 43 00:01:59,810 --> 00:02:01,410 like this it's going to turn red 44 00:02:01,410 --> 00:02:03,010 or FIXME 45 00:02:03,010 --> 00:02:05,900 and I have all kinds of these keywords here 46 00:02:05,900 --> 00:02:07,680 that I have to find the different colors 47 00:02:07,680 --> 00:02:10,140 to make them visible in my code. 48 00:02:10,140 --> 00:02:13,120 And it even shows up here in this 49 00:02:13,120 --> 00:02:14,690 scroll bar. 50 00:02:14,690 --> 00:02:16,310 If I had these in different lines, 51 00:02:16,310 --> 00:02:18,660 then you would see 52 00:02:18,660 --> 00:02:20,570 the three colors are now here in this side 53 00:02:20,570 --> 00:02:22,613 and this is incredibly useful. 54 00:02:24,950 --> 00:02:25,940 All right. 55 00:02:25,940 --> 00:02:27,530 And then of course my 56 00:02:27,530 --> 00:02:28,970 VS code theme, 57 00:02:28,970 --> 00:02:30,790 which is Oceanic Next, 58 00:02:30,790 --> 00:02:33,070 so I get this question all the time 59 00:02:33,070 --> 00:02:35,350 and so instead of asking it 60 00:02:35,350 --> 00:02:38,100 well here is the answer for that. 61 00:02:38,100 --> 00:02:39,180 All right. 62 00:02:39,180 --> 00:02:40,160 But now 63 00:02:40,160 --> 00:02:41,800 about 64 00:02:41,800 --> 00:02:42,690 where is it? 65 00:02:42,690 --> 00:02:44,500 So Prettier 66 00:02:44,500 --> 00:02:46,860 this is a very nice extension that can 67 00:02:46,860 --> 00:02:48,840 automatically format code, 68 00:02:48,840 --> 00:02:50,390 no matter if JavaScript 69 00:02:50,390 --> 00:02:51,860 or CSS 70 00:02:51,860 --> 00:02:53,170 or even HTML. 71 00:02:53,170 --> 00:02:55,810 With this extension we no longer need to worry 72 00:02:55,810 --> 00:02:57,380 about formatting. 73 00:02:57,380 --> 00:02:59,690 And it is actually very opinionated, 74 00:02:59,690 --> 00:03:02,140 so it follows a very strict set 75 00:03:02,140 --> 00:03:05,840 of rules with only a small configuration possible. 76 00:03:05,840 --> 00:03:08,210 But in this case of code formatting, 77 00:03:08,210 --> 00:03:10,720 it's actually very nice when someone else 78 00:03:10,720 --> 00:03:13,030 takes these decisions for you. 79 00:03:13,030 --> 00:03:17,150 So that is one less thing that we have to worry about doing. 80 00:03:17,150 --> 00:03:19,410 Okay, so our code will automatically 81 00:03:19,410 --> 00:03:21,910 format without us having to do anything 82 00:03:21,910 --> 00:03:24,373 or worrying about a certain style. 83 00:03:25,480 --> 00:03:26,313 Okay? 84 00:03:26,313 --> 00:03:27,530 So if you want to give it a try, 85 00:03:27,530 --> 00:03:30,450 please go ahead and install it now here. 86 00:03:30,450 --> 00:03:33,150 Probably you have a install button. 87 00:03:33,150 --> 00:03:36,480 I, of course, already have it installed. 88 00:03:36,480 --> 00:03:39,730 Next up what you need to do in order to get the full power 89 00:03:39,730 --> 00:03:41,020 of this extension 90 00:03:41,020 --> 00:03:42,930 is to go to your settings 91 00:03:42,930 --> 00:03:45,003 and then activate Format on Save. 92 00:03:46,170 --> 00:03:47,390 So just 93 00:03:47,390 --> 00:03:51,010 search for format and then Format on Save. 94 00:03:51,010 --> 00:03:53,780 So whenever we save a file now 95 00:03:53,780 --> 00:03:57,600 it will automatically use Prettier to format our code. 96 00:03:57,600 --> 00:03:59,250 So we installed Prettier. 97 00:03:59,250 --> 00:04:01,200 We enabled Format on Save. 98 00:04:01,200 --> 00:04:04,040 And now we can configure Prettier a little bit. 99 00:04:04,040 --> 00:04:04,873 Again, 100 00:04:04,873 --> 00:04:06,920 as I mentioned it's very opinionated. 101 00:04:06,920 --> 00:04:09,490 So there's not a lot of stuff that we can change 102 00:04:09,490 --> 00:04:12,310 but some things we actually can change. 103 00:04:12,310 --> 00:04:14,303 Now we could do that here, 104 00:04:15,500 --> 00:04:17,330 right in VS code, 105 00:04:17,330 --> 00:04:18,300 but instead 106 00:04:18,300 --> 00:04:22,760 what we can also do is to define a configuration file. 107 00:04:22,760 --> 00:04:23,593 Okay? 108 00:04:23,593 --> 00:04:26,460 And I find that actually better to do. 109 00:04:26,460 --> 00:04:30,400 So instead of using VS code to define the settings, 110 00:04:30,400 --> 00:04:33,000 we can use a Prettier config, 111 00:04:33,000 --> 00:04:33,833 which is called 112 00:04:36,040 --> 00:04:37,970 Prettier RC. 113 00:04:37,970 --> 00:04:41,021 All right, so it has dot then prettier 114 00:04:41,021 --> 00:04:42,570 rc. 115 00:04:42,570 --> 00:04:44,740 Then we open the curly braces 116 00:04:44,740 --> 00:04:47,770 and then in here we can define some settings. 117 00:04:47,770 --> 00:04:50,250 And I find it better to do it like this 118 00:04:50,250 --> 00:04:52,240 because then I can change configurations 119 00:04:52,240 --> 00:04:54,290 from one project to another. 120 00:04:54,290 --> 00:04:55,540 And even more importantly, 121 00:04:55,540 --> 00:04:58,070 it makes it easier for multiple developers 122 00:04:58,070 --> 00:05:02,000 all on the same team to all use the same configuration. 123 00:05:02,000 --> 00:05:05,610 Okay, so that can be very very useful on teams. 124 00:05:05,610 --> 00:05:09,220 Even more useful than when you're just working on your own. 125 00:05:09,220 --> 00:05:12,490 Now the only setting that I actually want to change here 126 00:05:12,490 --> 00:05:14,003 is called single quote. 127 00:05:16,120 --> 00:05:19,350 So actually Prettier already has this 128 00:05:19,350 --> 00:05:23,220 auto completion built in and so it knows that single 129 00:05:23,220 --> 00:05:24,653 will mean single quote. 130 00:05:25,530 --> 00:05:28,490 And the default is false, but I want to set it to true. 131 00:05:28,490 --> 00:05:31,720 And so what that's gonna do is that all my quotes 132 00:05:31,720 --> 00:05:35,360 will change from double quotes to single quotes, okay? 133 00:05:35,360 --> 00:05:37,750 So I gave it a save 134 00:05:37,750 --> 00:05:40,550 and here is our index.js. 135 00:05:40,550 --> 00:05:45,330 And now let's see if there is any double quotes here 136 00:05:45,330 --> 00:05:46,600 and I think they're not 137 00:05:46,600 --> 00:05:50,710 because I pretty consistently used the single quotes anyway. 138 00:05:50,710 --> 00:05:55,110 But let's just put some double quotes somewhere here 139 00:05:56,030 --> 00:05:57,670 and now I'm gonna give it a save 140 00:05:57,670 --> 00:05:59,750 and take a look at what happens. 141 00:05:59,750 --> 00:06:00,583 Whoa. 142 00:06:00,583 --> 00:06:04,500 So first of all you saw that a lot of stuff changed here 143 00:06:04,500 --> 00:06:07,870 and so our code kind of jumped around here, 144 00:06:07,870 --> 00:06:12,100 but this is where I had the single quotes here. 145 00:06:12,100 --> 00:06:15,063 So you see that they back to being the double quotes. 146 00:06:16,210 --> 00:06:18,640 Now all this code jumping around was probably 147 00:06:18,640 --> 00:06:21,490 because at some point I had multiple lines. 148 00:06:21,490 --> 00:06:23,430 And Prettier does not allow that. 149 00:06:23,430 --> 00:06:26,760 So if I have something like this and give it a save 150 00:06:26,760 --> 00:06:30,450 then Prettier will only allow one blank line. 151 00:06:30,450 --> 00:06:34,030 And actually this was for me the most difficult change 152 00:06:34,030 --> 00:06:36,760 of all the formatting that Prettier does. 153 00:06:36,760 --> 00:06:38,310 And it's not configurable 154 00:06:38,310 --> 00:06:40,600 so we cannot change that unfortunately. 155 00:06:40,600 --> 00:06:43,010 Because sometimes I like to have multiple lines, 156 00:06:43,010 --> 00:06:45,020 but with Prettier that's just not possible. 157 00:06:45,020 --> 00:06:47,550 I can do something like this and then it's gonna work 158 00:06:47,550 --> 00:06:50,190 but it's just a work around. 159 00:06:50,190 --> 00:06:54,160 But still with this problem I really prefer to use Prettier. 160 00:06:54,160 --> 00:06:57,420 Again because it takes the thinking of formatting 161 00:06:57,420 --> 00:06:58,343 away from it. 162 00:06:59,500 --> 00:07:03,120 For example, something else that I did here was this. 163 00:07:03,120 --> 00:07:05,980 So whenever a certain number of characters in a line 164 00:07:05,980 --> 00:07:07,130 is exceeded, 165 00:07:07,130 --> 00:07:10,080 it will then find a good way of breaking the code 166 00:07:10,080 --> 00:07:11,600 into multiple lines. 167 00:07:11,600 --> 00:07:13,890 And so that's what it did here. 168 00:07:13,890 --> 00:07:15,773 Let's see what else we have here. 169 00:07:16,900 --> 00:07:17,960 Well I think 170 00:07:17,960 --> 00:07:21,390 for maybe besides this change we just taught 171 00:07:21,390 --> 00:07:24,270 everything kind of remained the same. 172 00:07:24,270 --> 00:07:28,400 Okay and so from now on in all the rest of the codes 173 00:07:28,400 --> 00:07:29,233 in this course, 174 00:07:29,233 --> 00:07:33,360 I will always use this PrettierRC configuration file 175 00:07:33,360 --> 00:07:35,333 with auto save on true. 176 00:07:37,100 --> 00:07:38,290 Okay. 177 00:07:38,290 --> 00:07:39,663 Another thing that I didn't mention is 178 00:07:39,663 --> 00:07:42,820 that it automatically puts the semicolons, 179 00:07:42,820 --> 00:07:45,090 so if I go ahead and delete this one, 180 00:07:45,090 --> 00:07:46,940 and this one, and this one. 181 00:07:46,940 --> 00:07:48,180 Give it a save. 182 00:07:48,180 --> 00:07:50,020 You see that they are back. 183 00:07:50,020 --> 00:07:50,853 All right? 184 00:07:51,700 --> 00:07:53,170 Now if you want to get an overview 185 00:07:53,170 --> 00:07:55,993 of all the stuff you can configure with Prettier, 186 00:07:57,030 --> 00:08:00,623 well that's very simple if we write Prettier into Google. 187 00:08:05,720 --> 00:08:09,780 So they position themselves as opinionated code formatter. 188 00:08:09,780 --> 00:08:11,080 And like I told you before 189 00:08:12,000 --> 00:08:15,300 and down here we have the options 190 00:08:15,300 --> 00:08:16,923 that we can actually configure. 191 00:08:18,340 --> 00:08:19,900 So print width. 192 00:08:19,900 --> 00:08:20,950 The tab width. 193 00:08:20,950 --> 00:08:24,300 So if you're one of these people who uses four width, 194 00:08:24,300 --> 00:08:27,630 which I actually was until kind of recently, 195 00:08:27,630 --> 00:08:29,130 like one year ago. 196 00:08:29,130 --> 00:08:32,960 Well then you can configure that using the tab width 197 00:08:32,960 --> 00:08:36,600 then you have for example the quotes that we just changed. 198 00:08:36,600 --> 00:08:39,850 So single quote we put it to true 199 00:08:39,850 --> 00:08:41,440 and you have all kinds of stuff. 200 00:08:41,440 --> 00:08:44,400 You can actually see it here on the right side, okay? 201 00:08:44,400 --> 00:08:47,000 But again, it's not a lot of configuration. 202 00:08:47,000 --> 00:08:50,273 So most of the stuff you can really not change. 203 00:08:51,260 --> 00:08:55,890 Another thing that we can experiment with is the tab width. 204 00:08:55,890 --> 00:09:00,773 So let's see this one to, I think the default is 80. 205 00:09:04,040 --> 00:09:06,693 Let's set it to something like 120. 206 00:09:09,560 --> 00:09:10,393 And 207 00:09:10,393 --> 00:09:13,920 I thought this would change this piece of code here, 208 00:09:13,920 --> 00:09:15,950 so being back to what we had before, 209 00:09:15,950 --> 00:09:17,180 everything in one line. 210 00:09:17,180 --> 00:09:18,203 Just to show you. 211 00:09:19,100 --> 00:09:21,880 But maybe our line is actually even longer than that. 212 00:09:21,880 --> 00:09:25,460 So let's put something really ridiculous here like 200 213 00:09:26,520 --> 00:09:27,460 and whoa! 214 00:09:27,460 --> 00:09:28,560 What's happening here? 215 00:09:30,880 --> 00:09:34,650 Ah ho! So you see that actually is now changed 216 00:09:34,650 --> 00:09:36,840 to something even weirder. 217 00:09:36,840 --> 00:09:39,323 Okay so I never did just kind of experiment. 218 00:09:40,820 --> 00:09:42,950 Put it back to 120 219 00:09:42,950 --> 00:09:44,463 and what's going on here? 220 00:09:51,370 --> 00:09:52,923 Let me just quickly fix this. 221 00:09:54,430 --> 00:09:56,800 And it does it again, all right. 222 00:09:56,800 --> 00:09:58,530 Put it back to 80 as we had 223 00:10:00,310 --> 00:10:02,420 and now it looks like this. 224 00:10:02,420 --> 00:10:03,253 Oh, 225 00:10:03,253 --> 00:10:04,086 yeah! 226 00:10:04,086 --> 00:10:04,919 Oh I'm sorry. 227 00:10:06,420 --> 00:10:07,740 That's not what I wanted to do. 228 00:10:07,740 --> 00:10:10,133 Of course I didn't want to change the tab width 229 00:10:10,133 --> 00:10:12,430 when my default is two. 230 00:10:12,430 --> 00:10:14,513 I wanted to change the print width. 231 00:10:15,690 --> 00:10:19,310 So basically how wide one line can be. 232 00:10:19,310 --> 00:10:21,283 Oh that was really stupid. 233 00:10:25,440 --> 00:10:28,883 So now it's back to normal because the default is two. 234 00:10:31,220 --> 00:10:34,120 So yeah now you can see that it actually got back into 235 00:10:34,120 --> 00:10:38,490 one line here because at this point here we are at column 236 00:10:38,490 --> 00:10:39,410 96. 237 00:10:39,410 --> 00:10:42,870 As you see down here and so the limit is 120. 238 00:10:42,870 --> 00:10:46,440 And so it didn't have to wrap this line of code 239 00:10:46,440 --> 00:10:48,240 into the second one. 240 00:10:48,240 --> 00:10:49,073 Okay? 241 00:10:49,073 --> 00:10:52,010 But I actually like this 80 limit 242 00:10:52,010 --> 00:10:54,060 and so I'm going to put it back here 243 00:10:54,060 --> 00:10:56,320 and use that one in the future. 244 00:10:56,320 --> 00:10:59,493 So I adjusted the default so let me just get rid of it. 245 00:11:00,870 --> 00:11:01,930 Give it a save. 246 00:11:01,930 --> 00:11:02,880 Give it a save. 247 00:11:02,880 --> 00:11:06,230 And so we're back to the way it was before. 248 00:11:06,230 --> 00:11:07,780 So if you think that you like this 249 00:11:07,780 --> 00:11:11,550 then please go ahead and use it just like I do. 250 00:11:11,550 --> 00:11:14,930 But if not, well then just kind of ignore everything 251 00:11:14,930 --> 00:11:16,590 that I said in this video 252 00:11:16,590 --> 00:11:19,260 and just keep doing the more normal way. 253 00:11:19,260 --> 00:11:20,943 So that's no problem as well.