Complete Intro to React v4 Installing Prettier for Code Formatting

[00:00:00]
>> Brian Holt: So something that's really big for me is code quality. I try and keep when I work on team projects and things like that, I try to keep my code quality really high. And a big model that I have it's that which can not be automated will not be enforced.

[00:00:13] So if I can't write some linting rule or testing rule that forces you to do something, I will not make you do that, because those sort of discipline sort of things almost never happen, right? You have some rule that you can't check in this kind of thing, right?

[00:00:28] And the next day, someone checks it in. So that's why I like anything that can be automated. So if I don't want you to check in a certain type of code. I'm gonna write a rule that will literally fail the build, if you try to do something, right?

[00:00:43] So that why I like linting, I like testing, I like auto code formatting, any one of these things. Tabs versus spaces, right? I've worked on way too many projects that have mixed tabs and spaces and I imagine some of you probably have as well. So that's why I use tools.

[00:01:01] If you try and check something with tabs it's just gonna say, nope, I'm not gonna check it in for you, right? So let's get started with some of these things. The first thing I want you to use is something called prettier. It's probably my favorite JavaScript project from the past two years.

[00:01:21] Let's move this around, okay. So I'm here inside of my root directory. And what I'm gonna say is npm install -D, which means dev dependency, not normal dependency. Prettier.
>> Brian Holt: So this went out to the npm registry and got me prettier and installed it in my project. If you look now, I have this node nodules directory which is gonna be filled with all the things that I've installed from the npm registry, Okay.

[00:02:07]
>> Brian Holt: So if any of you are coming from a tool, or from a programming language like Go, you'll be familiar with something called the Go format, right? Gofmt. One of my most favorite things about the Go ecosystem is they all use the same formatter and there's like very little rules.

[00:02:24] So most Go code looks relatively similar. So if you jump around from Go project to Go project, they all indent the same way. They all have the similar spacing rules, it makes it all very easy to read, because it's all very uniform. A really, really smart guy that was working at Mozilla at the time wrote this thing called Prettier.

[00:02:46] It does the same thing, but for JavaScript projects. And I'm just a massive fan of it, because it does the same thing. So we're talking about double quotes or single quotes. The reason why I don't really care is cuz Prettier automatically changes them all to double quotes. So I never ever have to think about it.

[00:03:02] So all that thing like that background process in my brain of should I format this is way? Should I use two spaces or four spaces? Should I put a space here? All those kinda dumb formatting things that you're always thinking about like indenting things. You just gotta shut down that process in your brain because Purdue just automatically fixes all these things for you.

[00:03:22] There's no decisions to be made.There's none of that cognitive overhead, it just fixes things for you.
>> Brian Holt: So let's show you how that works really quick. So I'm gonna go into my source directory here, and I have app.js, and I wanna format that. So what I'm gonna do is I'm gonna, why does this keep changing on me?

[00:03:46] All right.
>> Brian Holt: So I have this here, it's relatively well formatted right now, but I'm just gonna do the worst thing I can possibly think of and I'm just going to remove all the indentation from this. This looks horrible now, doesn't it. You're gonna cringe a little bit.

[00:04:06] Someone's dry heaving in the room. [LAUGH] But what I can say is what npx is gonna do is it runs a package from my node directory. So npx prettier app.js. So this is gonna run prettier on app.js.
>> Brian Holt: And you can see here, it actually fixes all this stuff just automatically for me.

[00:04:30] So if I say, mpx app.js --write, it'll actually overwrite the file with the correct formatting.
>> Brian Holt: So now, if I go look at this, it's all fixed again. But you can see here, everything is now in double quotes, it's all, it's done, redone some of the things, so that the line length is under 80, it does a bunch of things for you just kind of out of the box.

[00:04:55]
>> Speaker 2: Which folder do you have to be in for [INAUDIBLE] not finding that?
>> Brian Holt: I'm in the source directory here. So if I was in the root part of the directory, I would just have to say, src/app.js, you just have to point it at the correct file.
>> Brian Holt: We'll fix it in a second so you don't have to actually worry about that,.

[00:05:23]
>> Speaker 3: So I know that there is a way to automatically turn on Prettier for every file. How do you feel about that personally?
>> Brian Holt: I have to do it.
>> Speaker 3: Okay.
>> Brian Holt: Yeah, I'm morally compelled to do so. [LAUGH] I'll show you how in just a second. It's a good question.

[00:05:42] So, yeah, you'll remember this was all in the same line. Prettier will actually break this into separate lines, so that the line lengths will be shorter, so it's a little bit easier to read. Again, one of my favorite parts about this is it's not very configurable. There are some things that you can configure with Prettier, but I don't care.

[00:06:01] [LAUGH] Cuz I don't have to care. As long as something is doing all the formatting for me, I don't care, right? Someone else gets to worry about it. Something gets to automate it, and I just don't have to worry about it anymore. Some people will just love to argue.

[00:06:14] It's like they should be using tabs, or this should be using 120 mile length, and the fact of the matter is I just don't care. I don't care as long as it's uniform, as long as it's easy to read, as long as it's good formatting, whatever.