Code Formatting

[00:00:00]
>> So I have my favorite project and all JavaScript land is prettier. It's a tool that takes your code and re-formats it into a consistent style. If you're coming from other languages like Galician or from Goa, languages like that, they have formatting tools kinda built into the language.

[00:00:19]
That's my favorite part about the GO community, is that they just have go format, and everything just looks the same. And you never have to think about, show you tab, show you spaces, show you, of all these different kind of things. It's like, there's just one set of rules, and it just always works and everyone uses the same thing.

[00:00:34]
So I greatly admire that about the GO community. So JavaScript has a tool that's becoming more and more standard called prettier. Written by a guy that I really admire, named James Long, and we're gonna use that now in our code. The great thing about prettier is it just re-formats your code, it uses the same amount of spaces, it uses the same rules for everyone.

[00:00:58]
So we can stop arguing, do you want tabs, do you want spaces, do you want semicolons, do you want a space here, do you not want a space here? All the stuff just goes out the window, because the Prettier just does it for you, and you can't argue with the tool, because the tool wins, right?

[00:01:12]
So let's go seeing how to make this work. So we're here back in the command line, instead of our project, and I'm gonna say npm install code I, that would work as well, -D Prettier, like that. And you'll get a bunch of stuff. You can ignore the errors and stuff like that.

[00:01:37]
It's totally fine. Okay, so now, I have prettier in my project. And we're gonna go into my project and we're going to create a new file. And we're gonna save it at the root of the drive, not inside a source inside of the root of our project, and it's gonna be called .prettierrc, so that it's very important that you call that, because that's what prettier is gonna be looking for.

[00:02:07]
So .prettierrc, and it's gonna say, are you sure, you're gonna say yes, and then, I want you to just put opening curly brace, closing curly brace, and just save it. Now, you might be wondering why did we do that? That seems kind of odd to do that. Prettier does have some, like knobs that you can turn is like I want four spaces or two spaces.

[00:02:35]
I don't care. I just want the tool to work. So when you put the opening curly brace here, you're informing prettier. This is a prettier project. So please format it. And then, I don't have any configurations, right. So if I wanted to, I could say like, end of lines, I want LF, or something like that.

[00:02:53]
That's the Linux formatted end of lines. I think you can put likes, oops. Anyway, there's a bunch of configurations. I don't really care, just do whatever, okay? So that's how we're gonna get prettier to work with our project. The next thing if you're using VS code, I want you to come over here to the extensions part, which is this little tab right here.

[00:03:17]
And I want you to search in the extensions marketplace for prettier and there's a few of them. The one that we want is one written by Esben Peterson. You can see it, you can know it's the right one, cuz it has like almost over 6 million downloads, it's that one.

[00:03:34]
I want you to install that one. If you're using sublime, if you're using them, or Emacs, or something like that, they all have their own plugins for it. You'll have to figure that on your own. But if using VS code, this is really easy to do, and then.

[00:03:51]
The last thing I need you to do, is that we're gonna just sit some configurations inside of our VS code. So if you're on Mac, its command comma that I want you to hit. If you're on PC, I believe it's Ctrl comma, and at the worst, you just come into, your looking for preferences, settings.

[00:04:10]
That's what I want you to find. So you should see something like this. The first one I want you to search for is format on save, this one here, make sure that that's checked. And then, I want you to look for prettier, and there's one that's called Type in prettier require config.

[00:04:34]
So it's this top one here. I don't have it checked, so I want you to check this one at the moment. What's nice about this, is it's telling the prettier extension, if you don't see prettierrc, then don't use prettier on this project. So then you can just leave this installed all the time, and you never have to think about, do I need to enable and disable this extension?

[00:04:58]
Okay, so now, what's great about this is, is like I can come over to, well, we don't have any JavaScript yet. But this should work with the HTML, right? Yeah. So notice that, like I can take all the formatting out of my HTML, and then, whenever I hit Command S, everything just readjust magically.

[00:05:21]
This is the prettier extension running prettier on your code automatically. That's what's great, is that I never have to think about, do I have the right indentation, and do I have the right semi colons, do I have the right style? Prettier just takes care of all that, so you get to shut down that thread in your brain that's thinking about, okay, do I need to add space, do I need to subtract, or something like that, it just works out of the box.

[00:05:45]
So that is what prettier is. Here are my notes, I talked about how to configure it with the command line. I'll just leave that to your exercise if you wanna go into the notes and do that. For now, this is just totally fine for us to work this way.