‫So this section and the node form project
‫are now basically completed,
‫but in this video I wanted to very quickly
‫go over my VS code setup
‫and also together with you set up the Prettier extension.
‫And so these are the extensions that I have installed
‫in my VS code and not all of them are going to be relevant
‫for this course,
‫but whenever there is a relevant extension
‫I will mention it by the time that it is useful.
‫For example this .env extension here will be useful
‫to highlight environmental variables in a .n file.
‫So let's just quickly go over some of them.
‫For example ESLint is useful to find bugs in our code
‫and actually we're going to set up ESLint with node a bit
‫later in another section.
‫We have image preview which is a very nice
‫small extension to preview images.
‫And maybe you have noticed that when we were doing this,
‫for example,
‫the sample here you see that here on the left side
‫it displays all the images that we include in a website.
‫So in this example it is this one.
‫All right so just something small that I found very useful.
‫What else do we have here?
‫We have Prettier and so this is the one
‫that I want to config with you in this video,
‫but for now let's go over
‫some other here.
‫So Pug is a language that we're going to use later
‫to build templates
‫and so it's useful to have this beautify
‫extension for that one as well.
‫Then I also have TabNine, which does some nice magic
‫auto completer sometimes.
‫Then I also have TODO Highlight,
‫which is very useful to do
‫this kind of
‫magic here.
‫For example when I have TODO,
‫it will highlight it in this green color
‫or if I write BUG
‫like this it's going to turn red
‫or FIXME
‫and I have all kinds of these keywords here
‫that I have to find the different colors
‫to make them visible in my code.
‫And it even shows up here in this
‫scroll bar.
‫If I had these in different lines,
‫then you would see
‫the three colors are now here in this side
‫and this is incredibly useful.
‫All right.
‫And then of course my
‫VS code theme,
‫which is Oceanic Next,
‫so I get this question all the time
‫and so instead of asking it
‫well here is the answer for that.
‫All right.
‫But now
‫about
‫where is it?
‫So Prettier
‫this is a very nice extension that can
‫automatically format code,
‫no matter if JavaScript
‫or CSS
‫or even HTML.
‫With this extension we no longer need to worry
‫about formatting.
‫And it is actually very opinionated,
‫so it follows a very strict set
‫of rules with only a small configuration possible.
‫But in this case of code formatting,
‫it's actually very nice when someone else
‫takes these decisions for you.
‫So that is one less thing that we have to worry about doing.
‫Okay, so our code will automatically
‫format without us having to do anything
‫or worrying about a certain style.
‫Okay?
‫So if you want to give it a try,
‫please go ahead and install it now here.
‫Probably you have a install button.
‫I, of course, already have it installed.
‫Next up what you need to do in order to get the full power
‫of this extension
‫is to go to your settings
‫and then activate Format on Save.
‫So just
‫search for format and then Format on Save.
‫So whenever we save a file now
‫it will automatically use Prettier to format our code.
‫So we installed Prettier.
‫We enabled Format on Save.
‫And now we can configure Prettier a little bit.
‫Again,
‫as I mentioned it's very opinionated.
‫So there's not a lot of stuff that we can change
‫but some things we actually can change.
‫Now we could do that here,
‫right in VS code,
‫but instead
‫what we can also do is to define a configuration file.
‫Okay?
‫And I find that actually better to do.
‫So instead of using VS code to define the settings,
‫we can use a Prettier config,
‫which is called
‫Prettier RC.
‫All right, so it has dot then prettier
‫rc.
‫Then we open the curly braces
‫and then in here we can define some settings.
‫And I find it better to do it like this
‫because then I can change configurations
‫from one project to another.
‫And even more importantly,
‫it makes it easier for multiple developers
‫all on the same team to all use the same configuration.
‫Okay, so that can be very very useful on teams.
‫Even more useful than when you're just working on your own.
‫Now the only setting that I actually want to change here
‫is called single quote.
‫So actually Prettier already has this
‫auto completion built in and so it knows that single
‫will mean single quote.
‫And the default is false, but I want to set it to true.
‫And so what that's gonna do is that all my quotes
‫will change from double quotes to single quotes, okay?
‫So I gave it a save
‫and here is our index.js.
‫And now let's see if there is any double quotes here
‫and I think they're not
‫because I pretty consistently used the single quotes anyway.
‫But let's just put some double quotes somewhere here
‫and now I'm gonna give it a save
‫and take a look at what happens.
‫Whoa.
‫So first of all you saw that a lot of stuff changed here
‫and so our code kind of jumped around here,
‫but this is where I had the single quotes here.
‫So you see that they back to being the double quotes.
‫Now all this code jumping around was probably
‫because at some point I had multiple lines.
‫And Prettier does not allow that.
‫So if I have something like this and give it a save
‫then Prettier will only allow one blank line.
‫And actually this was for me the most difficult change
‫of all the formatting that Prettier does.
‫And it's not configurable
‫so we cannot change that unfortunately.
‫Because sometimes I like to have multiple lines,
‫but with Prettier that's just not possible.
‫I can do something like this and then it's gonna work
‫but it's just a work around.
‫But still with this problem I really prefer to use Prettier.
‫Again because it takes the thinking of formatting
‫away from it.
‫For example, something else that I did here was this.
‫So whenever a certain number of characters in a line
‫is exceeded,
‫it will then find a good way of breaking the code
‫into multiple lines.
‫And so that's what it did here.
‫Let's see what else we have here.
‫Well I think
‫for maybe besides this change we just taught
‫everything kind of remained the same.
‫Okay and so from now on in all the rest of the codes
‫in this course,
‫I will always use this PrettierRC configuration file
‫with auto save on true.
‫Okay.
‫Another thing that I didn't mention is
‫that it automatically puts the semicolons,
‫so if I go ahead and delete this one,
‫and this one, and this one.
‫Give it a save.
‫You see that they are back.
‫All right?
‫Now if you want to get an overview
‫of all the stuff you can configure with Prettier,
‫well that's very simple if we write Prettier into Google.
‫So they position themselves as opinionated code formatter.
‫And like I told you before
‫and down here we have the options
‫that we can actually configure.
‫So print width.
‫The tab width.
‫So if you're one of these people who uses four width,
‫which I actually was until kind of recently,
‫like one year ago.
‫Well then you can configure that using the tab width
‫then you have for example the quotes that we just changed.
‫So single quote we put it to true
‫and you have all kinds of stuff.
‫You can actually see it here on the right side, okay?
‫But again, it's not a lot of configuration.
‫So most of the stuff you can really not change.
‫Another thing that we can experiment with is the tab width.
‫So let's see this one to, I think the default is 80.
‫Let's set it to something like 120.
‫And
‫I thought this would change this piece of code here,
‫so being back to what we had before,
‫everything in one line.
‫Just to show you.
‫But maybe our line is actually even longer than that.
‫So let's put something really ridiculous here like 200
‫and whoa!
‫What's happening here?
‫Ah ho! So you see that actually is now changed
‫to something even weirder.
‫Okay so I never did just kind of experiment.
‫Put it back to 120
‫and what's going on here?
‫Let me just quickly fix this.
‫And it does it again, all right.
‫Put it back to 80 as we had
‫and now it looks like this.
‫Oh,
‫yeah!
‫Oh I'm sorry.
‫That's not what I wanted to do.
‫Of course I didn't want to change the tab width
‫when my default is two.
‫I wanted to change the print width.
‫So basically how wide one line can be.
‫Oh that was really stupid.
‫So now it's back to normal because the default is two.
‫So yeah now you can see that it actually got back into
‫one line here because at this point here we are at column
‫96.
‫As you see down here and so the limit is 120.
‫And so it didn't have to wrap this line of code
‫into the second one.
‫Okay?
‫But I actually like this 80 limit
‫and so I'm going to put it back here
‫and use that one in the future.
‫So I adjusted the default so let me just get rid of it.
‫Give it a save.
‫And so we're back to the way it was before.
‫So if you think that you like this
‫then please go ahead and use it just like I do.
‫But if not, well then just kind of ignore everything
‫that I said in this video
‫and just keep doing the more normal way.
‫So that's no problem as well.