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]
>> Code quality it's really important to me. I've worked in developer infrastructure for like, I don't like six or seven years now my career. So my goal as a developer infrastructure person has to make sure that people write quality code and it doesn't slow them down. So I'm really big in the tools that helped me write better code faster.
[00:00:23] So I'm gonna introduce you to my two ones that I literally just can't live without, like I teach you these things. Because if I didn't teach you these things and set them up in your projects, I would have a hard time coding the rest of the workshop. So I'm just gonna drag you all along with me and my developer.
[00:00:37] Productivity diatribe here. So the two tools we're gonna talk about today are prettier and eslint, and they're just two tools that kinda help me use kinda stay on the straight and narrow. And allows me to stop thinking about things about what's the spacing here? Do I have enough tabs or spaces?
[00:00:57] Do I need a semicolon here, it just takes care of all that stuff automatically for you. And the first one here is prettier. So prettier is a automatic code formatter. So if you've ever worked with like, go or Elm, or reason or camel or some of those things that have built in code formatters.
[00:01:17] This is basically that for the JavaScript ecosystem that it just automatically, every time you save your file, it just re adjusts all the spacing and commas and all that kind of stuff for you. I love it because it allows me to shut down the part of my brain that cares about code formatting, right?
[00:01:32] Like I remember earlier in my career when I was writing like PHP and stuff like that I'd be happy, like, meticulously paying attention is like, do I have the right semi colon? Is this indented correctly, all this kind of like just mechanical syntactical kind of things. This allows me to just shut off that thread in my brain and freeze it up to think about something else.
[00:01:49] And that's why I just adore this as a tool. It's very opinionated. As in like it's going to make you if you want it to do four tabs or four spaces instead of two spaces. It's just it doesn't care about your feelings, right?. It just does whatever it's gonna do.
[00:02:05] And that's really bothers some people. They think that they have beautiful art and their codes formatting and they're wrong. [LAUGH] Cuz I don't care about what kind of code formatting you have. I just want it to be done for me. I don't wanna never argue about it ever again.
[00:02:21] So let's go ahead and do that. What I want you to do now, is I want you to pop back into your command line here. Again, here in the adopted me directory, and I want you to do npm install -D, -D means that it's a dev dependency, right?
[00:02:43] I don't need to ship prettier to production. It's just to help me write code locally. And it's called prettier. Okay, you can see now that I have a node modules directory, that's where prettier was installed. You can see it's right there. And I also have a package lock file.
[00:03:03] You should check in your package lock file, but you should never modify it by hand. It's basically like a lock files like here's the exact versions that I used to install and get this running locally, so that when you ship this out to production, it uses the exact same ones.
[00:03:27]
>> If you have it as an extension on VS code, do you still need to download it?
>> If you have it as a extension on VS code, do we still need to download it? The answer is yes. But maybe not for the reason that you think, you can actually do it through VS code and never have to install it ever again.
[00:03:44] But if this is a project that you want to work on long term and maybe other people are going to come use it, you need to set it up so anybody can use it even if they don't use VS code.
>> Okay, thank you.
>> Yep. You're basically also just providing a manifest to all future, selves as well as other people that this is the setup that I have for this project right and by putting prettier in there, like this is a project that uses prettier.
[00:04:10] Okay, the next thing you need to do is you need to create a file here in the root of your project. New file, we're gonna call it dot. The dot is very important, so please put the dot prettier rc. And this is basically the configuration for prettier. Here you can configure I want two spaces versus four spaces.
[00:04:35] Please use tabs, please use single quotes, please use double quotes. You put that all here inside of an object. And my favorite configuration for prettier is just empty object. I just want all the defaults. I don't want to think about any of this because like I said before, I actually don't care about the formatting.
[00:04:51] I just want someone to always do it. For me, and I never wanna think about it. So this is really easy because I never have to think about what configuration of it I want. It just works. Okay, so I'm gonna save that. And then here instead of my package.json we're gonna create, you can delete this test script.
[00:05:16] Script is basically like a repository of shell commands that work inside of your project. So every time that I want run, MPM run format, I want it to run prettier for me. So I'm gonna say prettier -- write. This is going to tell prettier to write out and modify all of your code to the correct format.
[00:05:41] And then here I'm gonna say and you'll have to stick with me for just a second. Because it does require some regex backslash, quote everything inside of the source directory. Then you put a forward slash, star star slash star. This is basically saying every file in this directory, no matter the depth, right, so if it's inside of like six directories go down recursively all of those directories, dot and then we want to only work on particular types.
[00:06:16] Have files who wanted to work on JS and JSX files slash JSX. This is how you say like I wanted to write on JS files and JSX files that's what the curly braces means. Again, this is not a regex course. Then we have to put backslash quote and then quote.
[00:06:33] So if you don't really understand it not really the point of this class, I wouldn't worry too much about it. But basically, you're just writing prettier. And you're telling it which files to write. That's what this does is like, write out to all of my JavaScript files inside of my source directory.
[00:06:48] That's what this entire thing means. And again, I provide this in here because we're gonna have VS code do it for us here in just a second but not everyone uses VS code. So, if someone comes in here with them, they should still be able to do the exact same setup as you.
[00:07:05] So now, if I run NPM run format, make sure after you have to save this now you can see here, it overrode app.js and it reformatted it. Here we go. So this is what it looks like before. This is what I had it as right. Now if I say that this is what it looks like afterwards.
[00:07:33] So some of you might say like Brian, I like to better before right? Like I liked how you had it formatted before and and prettier just doesn't care about your feelings, right?. It just does it however it thinks that should do it. But honestly, I love this because I never ever have to think about this.
[00:07:49] It just happens for me.
>> What if I want to make a custom create here? Configuration.
>> So the way that you do that is through in this prettier RC file, you can put various different I want JSX single quotes or I wanna use tabs instead of spaces that would be inside of here.
[00:08:12] There's a pretty limited amount of knobs to turn here but there are some that you. You can turn, and that's all on the prettier docks if you wanna go through that.
>> Thank you.
>> Yep. The one thing I was gonna say, notice if I run NPM format again, it's grayed out because it's not modifying it right.
[00:08:35] It's a all this was already formatted with prettier I'm not gonna do anything to it. Whereas like up here was in white, because that means it did overwrite it. So let's install the VS code extension. If you click here on the side of VS code, these are the extensions and search for one called prettier.
[00:08:57] You can see here I've already installed it pretty crude for matter from it should be the one that has by far the most installs, right? Yes, Ben p dot prettier dash VS code. So install that. And then there's a couple things that you need to enable. So if you open your settings which you can do at any time by command, comma or control, comma depending on what you're on, so the first thing to do is format on save.
[00:09:35] Make sure that that's checked. This will make sure that prettier runs every time you save a file. And then the other one that you wanna open is prettier. And. Config. Yeah, this one here. So if you search for prettier config, turn on this one called Require Config. So what this will do is if you put a prettier file inside of a project then prettier knows okay?
[00:10:12] This is now when I need to run otherwise it will run on every file that you ever open in VS code, which is probably not like what you want. You only wanna run prettier projects. And that's what this does. So it just waits until there's a prettier config file and then it'll run, otherwise it won't, Okay?
[00:10:33] Those are the two things now. Now if I go and mess up the spacing in here, right, let's just take off all the spacing. So now everything's pushed against the side and just looks really terrible, right? As soon as I hit Command S and save everything, just reformat.
[00:10:50] Beautifully. Are here if I just put like a million spaces some of the things that will try and say like well you will think you are trying to put a lot of space here. So I'll try and keep some of it for you. But now this is really useful because now if I like paste code in and save it, it'll just format everything.
[00:11:18] So everything looks like it's part of the same project.