This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Prettier" Lesson
[00:00:00]
>> Speaker 1: So first thing, let's just go ahead and get this out of just being in a script tag. So I'm just gonna cut this.
>> Speaker 1: I'm gonna create a new file. And I'm actually gonna create a new directory, as well. New folder, I'm just gonna call it js.
[00:00:27]
>> Speaker 1: And inside of js, I'm gonna create a new file.
>> Speaker 1: And I am going to call this.
>> Speaker 1: Let's call it
>> Speaker 1: ClientApp.jsx.
>> Speaker 1: And we're just gonna put all of that in there.
>> Speaker 1: Save that. And now we're going to get to start talking about some tools for just a moment, before we go back to writing more React.
[00:01:06] So the first tool that I wanna talk about, which I am just incredibly excited about, to the point that I've contributed a couple times, is a tool called Prettier. So I've written a little bit of Go just here and there. And one of my favorite favorite parts about writing Go is a tool called Go Format.
[00:01:27] Which is just amazing. That it's amazing because the Go community has standardized on this tool that just automatically formats their code for them. They don't have to do anything. It just always looks the same. And there's just never any question. Just everyone always uses Go Format. And there's no bike shedding about how many tabs or spaces or semicolons or no semicolons.
[00:01:49] Or spaces between function and the parenthesis, all of this stuff just is never talked about. Because this tool just already takes care of it for them and there's no room to argue about it. Now for anyone that's been writing JavaScript for any length of time, there's lots of room to talk about it, right?
[00:02:05] How many of us have had just this week a conversation like that? Pretty much most of us, right? So enter Prettier. Prettier is kind of aiming to be this Go Format tools that it does all of this formatting stuff for you. And this actually scares a lot of people like, when I introduce it to the Netflix there was some fear and uncertainty and doubt, right?
[00:02:29] Because people have their patterns that they're accustomed to and that they like, right? However, the way that I like to propose it to people is, imagine that when you're writing code you always have this background thread in your brain of how am I gonna make this more readable?
[00:02:43] How am I gonna format this right? Is all the spacing correct? Do I have the right commas in the right places? Should I be writing semi colons, should I not write it? All these decisions are just constantly going on in the background. Imagine if you could just shut down that thread, right?
[00:02:56] And that you just free up more resources to be thinking about anything else. This is even a great example right here. So, here I pasted this code, right? And the indentations off, right? Because the first one's correct but there is extra tabs coming in from the HTML. And furthermore there's now mixed tabs and spaces too, which is kind of a problem.
[00:03:19] So I had to actually go in and fix this. I pasted it and the first thing I instantly did is I went and said okay, I'm gonna fix this and get all of it right. Prettier can just fix this for you automatically on the fly every single time.
[00:03:31] So you can paste code, and not have to worry about, well should I break line here, should I break at 180, should I break 120? All these different things Prettier is just gonna do it for you. So, I invite you to tool around with it. They actually did us quite a few that we can choose, right?
[00:03:48] We can tell it to wrap it 80 characters, we can tell it to wrap it 120, we can tell it to use semicolons, we can tell it not to tabs, spaces, etc. I kinda wish that they hadn't. I kinda wish that they had just said, this is the way it is, and just deal with it.
[00:04:01] But I'm just happy it exist. So let's go with that. So what I want you to do now, is I want you to go to your command line, and I want you to do yarn global add prettier.
>> Speaker 1: I think mine should already be up to date.
>> Speaker 1: 1.31.
[00:04:36]
>> Speaker 1: Yep.
>> Speaker 1: So, this is going to give us the ability to do it. So, if I go into, I'm in node modules, so if I go into js, I saved this, right? So notice that the, in fact, let's just really mess it up. So now everything is really unformatted, right?
[00:05:00] This is just a mess but still valid JavaScript, right? This would totally would work in a browser. Now if I say prettier.
>> Speaker 1: And what we're gonna do here is we're gonna say --single quote. So we're gonna give it some parameters to tell how we want it to be formatted, we're gonna do --print-width=20.
[00:05:25] It defaults still 80, which is to small for my opinion, I'm not coding on an old school terminal so. And then we're just gonna learn on ClientApp.jsx, okay. So if I just hit Enter right now is not actually gonna write it, its just going to show me what it's gonna look like.
[00:05:50]
>> Speaker 1: So this is what it actually printed out.
>> Speaker 1: When I ran that. But notice nothing's changed here yet. Right, it's still broken.
>> Speaker 1: So now if I come in here and say --write,
>> Speaker 1: It's gonna tell me which one it wrote in 56 milliseconds, and notice I come back here, everything is well formatted.
[00:06:24]
>> Speaker 1: And also notice for a example that, I was not writing semicolons before and it just did it automatically.
>> Speaker 2: People are asking why you put jsx instead of js as the file extension name.
>> Speaker 1: So right now I'm putting jsx, because momentarily we wanna be introducing Babel, which is going to make it possible for us to use jsx.
[00:06:49] So you can put .js for now, but you're gonna have to rename it in ten minutes. So I would just recommend keeping it as jsx. And the reason why I do that, the real reason, our linting rules are going to require it. But the secondary reason they chose that is they require that anything that will use jsx that needs to be transpiled.
[00:07:12] Must have a jsx extension, just to kind of denote that this is something to be transpiled.
>> Speaker 2: Sorry, so after you ran the prettier on jsx, what else did you use?
>> Speaker 1: You have to just put --write.
>> Speaker 1: Otherwise it just displays it and it doesn't actually write it.
[00:07:38]
>> Speaker 1: So again if I write it again, it's gonna show it as grey because it didn't actually change anything, so.
>> Speaker 2: Can that be added automatically to sublime so it saves it running pretty?
>> Speaker 1: Yep, we're gonna do that. So exactly this is kind of burdensome to do.
[00:07:57] So if you go to the class website here, editor integration, right? So right now, prettier doesn't have a good way of doing project level configs which is annoying, right? They're working on it. It's something is gonna get done. But, for now you have to configure it for every individual developer that is writing on your project.
[00:08:25]
>> Speaker 1: That's one limitation if you don't mind. So anyways, come here to and go here. Which is gonna take you to the Prettier repo and it's going to take you down to the various editor integrations. So it's possible to do with Atom, Emacs, Vim, then have it for Visual Studio Code, Visual Studio, Sublime and Web Storm.
[00:08:47] If you're not using one of those,
>> Speaker 1: Good luck. [LAUGH] No, I'm sure it's possible. These are just the ones that they have notes for. So I will show you how to it with Sublime.
>> Speaker 1: You're gonna come in and say install package. And I already have it installed so it's not gonna show up, but it's called jsprettier.
[00:09:10] All one word, install that. And then what you're gonna do is you going to come into sublime. So I am bringing up this menu by hitting Shift+Cmd+P, then open up js pretty or user, settings. So, for me, I'm using MVM, so I had to define where Prettier was, which is easy to do.
[00:09:37] You just come in here and say which prettier, and that's gonna give you a path. So, just copy and paste that. Node path, again I had to say again, which node.
>> Speaker 1: Copy and paste that. And then this is the one that you might wanna change, which is auto_format_on_save.
[00:10:01] Stick that to be true. And then here are the Prettier options that you want to use. You're welcome to change any of these. The only one that I ask you that you use is you need to use the parser flow, since we'll be using flow later in the day.
[00:10:16] It will be useful for you to use the flow parser instead of the Babylon parser.
>> Speaker 2: Sorry, how did you get to that file in Sublime? I'm also using it.
>> Speaker 1: So, shift command P, then js prettier, then go to the prettier settings user.
>> Speaker 1: If you want to see all of the ones, you can look at the default ones.
[00:10:38] It will show you all of the things that you can change.
>> Speaker 1: But the key is, here, you wanna do auto_format_on_save, right? This will make things a ton easier. So for example, if I do this and mess it up again, all I have to do is click Save, and everything just fixes itself automatically.
[00:11:05]
>> Speaker 1: And you can get again, really wildly out of touch here. Make things that are technically valid JavaScript, but it'll just fix all of it for you.
>> Speaker 1: It will do some respecting. So for example here, I put an extra line break here. It will respect things like that.
[00:11:29]
>> Speaker 1: It'll respect that I want to keep these on two separate lines. It'll also respect that I wanna try and keep these on one line.
>> Speaker 1: So some of those things that'll keep or maybe not.
>> Speaker 1: Here we go.
>> Speaker 1: The last thing I wanna do is I wanna make it so people can do actually the entire project from the command line.
[00:11:59] So going back to this we're gonna say, top, prettier --write, --single-quote --print-width=120. And then --parser=flow. What other settings did we have in here?
>> Speaker 1: I think most of these are just, these are all the default ones.
>> Speaker 1: Tab width equals 2. --tab.width=2. So this is what I'm saying, there's no config file.
[00:12:52] You actually have to do it every single time in the command line. And then, we wanted to make sure that it hits every js file and every jsx file, right? Cuz we wanna always format those two different things. So what we're gonna do here is \",
>> Speaker 1: js,
[00:13:14]
>> Speaker 1: ** /*.js I want to do js,jsx\
>> Speaker 1: Does that look right, let's try that.
>> Speaker 1: Yep, I didn't think so. Yeah, I don't need the back slashes I can just put the quotes. That's what it is. Okay so,
>> Speaker 1: [COUGH] What this is going to do is it's going to hit everything in your JS directory that has a JS or a JSX.
[00:13:57]
>> Speaker 1: Kind of file extension.
>> Speaker 1: So this would be useful for example, if somebody didn't want to install prettier and was working on your project. Or you could put it as maybe some sort of pre commit hook. You could put it into your continuous integration. So anything you're gonna require your users to do.
[00:14:14] It's probably good to have kind of an escape hatch if they don't want to install all of your tooling for them inside of the editor. So what we are gonna do is we are actually going to, this is a paint remember right, slash impossible to remember. [LAUGH] I have to lookup my notes here to get it.
[00:14:27] So we're going to put this inside of our project directory, so are gonna go into the package.json. And here I have scripts, and you can see that there's already one here for the api, which we'll run later. Don't worry about it for now. [SOUND] We're gonna put another one here that says format.
[00:14:45]
>> Speaker 1: And we're just going to put that thing that we just already had.
>> Speaker 1: But you're gonna have to escape those backslashes.
>> Speaker 1: Let's do view ward wrap.
>> Speaker 1: So now, I'll let you finish. Well, let me show you and then I'll come back and I'll let you finish it and then we'll take a quick break after that.
[00:15:20] I can come to the command line and I can say, yarn, so, we're gonna use yarn for this. And then all I have to say is yarn format. And it's gonna go through and run that command, right? So, I can save that bach command in to the package.json and then run it.
[00:15:38] This is the same thing as saying npm run format, same dev.
>> Speaker 1: But this is nice now, because I've kind of preemptively saved this, so that we can always use it. That makes sense?
>> Speaker 1: Cool.
>> Speaker 1: And what's nice is we don't have to go and tell it every single file, it's always just gonna pick up everything in that js directory.
[00:16:08] Now to be honest, for the rest of the day we're not gonna use this because our editor's already configured for it so, that's nice.