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:02,880 ‫Give it a save. 246 00:11:02,880 --> 00:11:06,230 ‫And so we're back to the way it was before. 247 00:11:06,230 --> 00:11:07,780 ‫So if you think that you like this 248 00:11:07,780 --> 00:11:11,550 ‫then please go ahead and use it just like I do. 249 00:11:11,550 --> 00:11:14,930 ‫But if not, well then just kind of ignore everything 250 00:11:14,930 --> 00:11:16,590 ‫that I said in this video 251 00:11:16,590 --> 00:11:19,260 ‫and just keep doing the more normal way. 252 00:11:19,260 --> 00:11:20,943 ‫So that's no problem as well.