Complete Intro to React, v7 Prettier

Transcript from the "Prettier" Lesson

[00:00:00]
>> Talk about some code quality tools. The first one that we're gonna do is probably one of my favorite tools, which is Prettier. Prettier is a tool, it's like the lost code formatter for Javascript. If you've written any amount of Go or Elm is another one that has a really good one or the that have really good code formatters.

[00:00:27] So let's talk about go format cuz that's one that I'm more familiar with. If you write go format or if you write go it's all only formatted one way because go from it formats all of your code for you and it takes all the discussion out of tabs versus spaces.

[00:00:39] Versus do I have a space between parentheses or not, it just does everything for you. And I so love that because I so hate having discussions with people about do we put a space here or not, do I put to this kind of white space? I profoundly don't care, I just don't wanna talk about it right?

[00:00:58] And that's what Prettier does for you it basically takes away the whole discussion it says like look at you can write your code however you want, you can put in your semicolons, you can not put in your semicolons. And whenever you click save, it's just going to format everything for you and you don't have to think about it.

[00:01:13] There's a background thread in my brain that just got shut down, right? I don't have to worry about white spacing or indenting or anything like that, it's just gone, and it just worries about it, and I love that. It means I get to think more about code and less about fluff.

[00:01:27] So what Prettier is gonna do is it's going to take in your code, it's going to break it down into an AST abstract syntax tree and then it's going to reprint it out with its own set of grammar. And it's going to blow away whatever code styling you put into it, which basically means don't bother putting any code styling with it cuz it's going to go away.

[00:01:46] I love this tool, I it's literally the first thing I put into any project that I do. I'll show you how to use it, and then we'll install into our project. So if you're not familiar with something called MPX, MPX is a tool that will install something and then run it immediately.

[00:02:02] So I use it a lot if I want to test something out so you can say MPX Prettier and it's going you can see I've already done this before. Because autocompleting out there it's going to install Prettier and then immediately run it on something, which is kind of fun if you want to like test something out.

[00:02:21] So I'm gonna say MPX app source app.js, and you can see here it just prints it out of what it would code format it to be. I think I have this unfortunately, all set to run automatically no matter what format and save. We'll just turn that off for just a second, now, so you can see here I made my code very unattractive, right?

[00:02:43] Let's just make it the most unattractive I can, let's do this. All right, so now this is just objectively terrible and hard to read, right? Hopefully I'm just hurting your soul a little bit, that's what I'm going for I want you to feel it. Okay and then if you run Prettier here, if I bring this back up and if I run MPX Prettier again, you can see here, it'll print it out really nice, like this into my terminal.

[00:03:09] So that's what Prettier is gonna do for you, and if I do-- right, now notice up here it actually went out and wrote it out here. So now it actually did fix it directly for me. And if I try and run it again it'll be grayed out because it'll say okay I ran it but nothing had nothing changed.

[00:03:31] So pretty works on a lot of things, it works on CSS, it works on flow, it works on TypeScript. They're adding more languages, I think they're talking about putting it like in PHP and like further languages out but for now, this is what it is. Again, this is my favorite tool like you don't even have to put in like semicolons right?

[00:03:49] So, I do this and I save it. This is valid JavaScript, right, technically semicolons for the most part are optional in JavaScript. Due to ASI automatic semicolon insertion is the name of the process that does it But if I do that again you'll see here that they come back right away.

[00:04:07] So in earlier versions of this course, I actually used to teach standard js if you've ever heard of that, written by the Illustrious Ferris who's a great open source author. This standard does not allow semicolons so it'll actually give you an error if you write semicolons. And so people ask me all the time do I care, like do I have feelings about semicolons is like as long as my computer's writing for me, I don't care if they're there or if they're not, if Prettier such putting them in there.

[00:04:34] I would stop putting them in there. Is Prettier packaging VS Code. It is an extension and I'll show you here how to install in just a second. But it's actually based on a command line tool, yeah, which is actually how most VS Code tools work they have a CLI that they install with the extension.

[00:04:52] So let's make our config here, so I want you to make a new file here, and they want you to call it .prettierrc. The name is important, and then inside of prettierrc I want you to put an empty object. This is a configuration object, there are some knobs and levers of like, do you want semi colons, how much spacing do you want?

[00:05:18] Those kind of things, and I don't like that. I think I've said this like a bunch of times yet, but I'm gonna say to get I don't care what the what the options are I just want it to work. So by putting this empty object in here, you're basically signifying to everyone's like, this project is formatted by Prettier and it's formatted by the default settings for Prettier.

[00:05:37] Feel free to look at it later and make all the adjustments you want, that's fine. And when I was introducing this at Netflix, I had to adjust a bunch of things to try and get as close as to the code style of the code that the code base was already in to satisfy the most people I could.

[00:05:52] There's tons of people that were had a lot of feelings about code formatting. I would suggest doing that if you're trying to introduce it your work, but otherwise, I just just do the empty one and just get used to it, it's very easy, right? And now I want you to go to if you're using VS code, you can install a Prettier extension, this one here.

[00:06:13] There's several of them, you want to install the one that has 19 million downloads, right, not the one that has 3,000. It's one made by what is the name of the package I can't remember. Anyway, this is one that you want so installed that, okay? Then I want you to open the settings which you can do by, there's a couple ways of doing it.

[00:06:38] But if you Cmd+Shift+P, you can look at settings or I always just hit Cmd+Comma, Preferences, I don't remember what it is. Anyway, just Cmd+Comma, Ctrl+Comma, this will open this, and then he wants format on save, so turn that on. I'm assuming most of you wanna set it up like I do, so it just runs every time that you save a file.

[00:07:07] And then this one's super helpful as well, require config. Prettier yeah so prettier require config this is super helpful that basically a prettier won't run unless there's a Prettier RC in the project. This is really nice, so if you jump between code bases that some that have prettier configs and some that don't, this will make sure that it only is running on projects that do have Prettier configs for you.

[00:07:39] Honestly, I mostly leave this off cuz I don't work on anything that doesn't have Prettier as a rule of thumb. So now, with all that set should you be able to just save and it'll work right? So not every time that I run save it will work all right.

[00:08:03] Now I no longer have to care at all about spacing or semicolons or commas it all just works out for me. Let's talk a second about NPM scripts or yarn scripts. That's Jim, thank you for this test one cuz we're not doing testing until an intermediate React. So, if you're gonna require that people use some sort of library in your project, like if I'm making a big open source project or I'm trying to introduce this at work, not everyone's gonna be using the same editor as me.

[00:08:34] And so I need to make sure that like whatever I'm doing works for everybody, not just for VS Code users, right? I can't require everyone to use the VS Code extension. So the way that I do that is, I make a script that runs Prettier with my config.

[00:08:47] So that if someone's using Emacs or something like that, it doesn't Emacs does have a Prettier plugin but maybe something else that doesn't. Right, they can just run the script at the end of this and then it will just work. So you can make a format function and just put Prettier-- right and then we have to put a little bit of like a regex match in here.

[00:09:11] Back slash and we're gonna put source slash * ,*, * /, *, and you can put js here or js comma jsx whatever you want to put then backslash quote. Why the quotes is cuz you want this past you don't want bashers ESA during the expansion, right? So if you don't put these quotes here, bash or zsh is going to intercept that and it's going to go find all the files that match that and then pass that in to Prettier.

[00:09:53] If you want Prettier to just get this string directly, so that Prettier can handle finding all the files correctly. If you want a more thorough explanation of that I made a course called The Complete Intro To The Command Line And Linux. And I go into in-depth in that.

[00:10:10] Suffice to say different shells do it different ways and this makes it consistent that Prettier can handle everything for you. And now that I've done this I can say npm run format. And you have to install it, that'll work too. So now after you've done that, you wanna say npm install-- are sent out dash D or you can say- -save- Dev.

[00:10:42] So two dashes, either the same thing, but me being the lazy person, I am -D works for me and then Prettier. So why- D? You want this to be a dev dependency not a regular dependency. Dev dependencies only get installed while you're working on the project. Dependencies get installed when it goes out to production right you don't need Prettier going out to production you just needed to work on the project.

[00:11:08] Okay, so now that I've installed that, now you can say NPM run format and you can see there, now it's running Prettier. Now a question you might answer me might ask me is like, well, what if they don't have Prettier installed globally? Which they shouldn't, to be honest with you should really install it in every project that you work on.

[00:11:33] Let me explain to you how NPM scripts works for just a second if you go into your node modules for just a second which is a scary thing I know right now we only have Prettier so it's actually not that deep in here. Notice there's this weird .bin directory?

[00:11:47] This is actually where all of your CLI clients that are you installed your node modules go into, right? So you can see here there's actually a Prettier thing here that references the bin Prettier here, right? So when I install eslint, you'll see the eslint CLI command will end up in here, you can see this as a shortcut.

[00:12:08] Arrays are similar because actually what it is. Again, if that's confusing to you check out this Linux CLI course. But suffice to say, here my package.JSON, I can reference anything that's here in this .bin directory. And notice smart enough to say, cool, check the .bin inside of the node modules.

[00:12:27] If it's there, run that one. Does that makes sense? What's nice about that is now it's portable so I can run this on Windows I can run this on Linux I can run it on Mac and it all works the same way cuz all references the same Prettier binary.

[00:12:46] Makes sense? Probably more NPM stuff than you ever wanted to know, but that's how that works. There aren't really any alternatives for Prettier at the moment, I remember seeing one that they're trying to make one that's more configurable, more like es lint where you can bring in your own rules.

[00:13:01] Like I said, I don't really wanna think about it so I just use Prettier but you and prettier has good opinions, right? But that's my thing about code format, it's all just opinions about what looks nice and it just doesn't matter it's just code, right? I'm not out here writing art.

[00:13:16]
>> There's one more question about package JSON when you have a package lock, it gets the exact same version but when that's not there, how does it determine the version?
>> Good question, it's basically what's the point of this package lock file. So, without getting into incredible depth in this, if you look in your package, it should be extremely long and it basically locks down your version to specific numbers and also specific If hashes right?

[00:13:48] So that if I'm going out from my local department where I tested everything works in the way that I'm happy with them. And then I go to production I can be guaranteed that I'm getting the same version that was the exact same file so that's not like Microsoft can just switch the files on me, right?

[00:14:04] Cuz basically it'll install everything and then it'll check the hash, make sure is this literally the same file that the developer saw when they were working on it locally. But you have to install it in a specific way, you have to say npm install-- use lock or-- production or something, I can't remember exactly.

[00:14:19] But with some flag, it'll actually totally ignore your package.json it'll only look at the package lock. So when you're working locally, you don't wanna do that, but when you go out to production you do wanna do it that way. So when you do you just say npm install, it'll ignore your package lock, if it doesn't exist, it will actually generate the package lock file.

[00:14:39] And you should check in your package lock file and you should never modify it directly. Only NPM should modify the package lock JSON file. Yeah, for the most part, you can just kind of just ignore its existence and just kind of just let it update itself. If you ever get in a bad state with it, which I've I frequently find myself doing just remove it and then just run npm install again and it'll generate it.

[00:15:03] That's what it's for it's for making its code supply chain auditing. I think it's the best way to put on what.
>> It's for just a quick note there were people that were having an issue getting In Prettier working inside of their editor with format on save. And there's an additional default format or setting in VS Code that are saying that setting it to Prettier fixed that issue for them.

[00:15:30]
>> Yes so you have to set the default JavaScript format because there's multiple different ways you can format JavaScript, eslint being one of them. So you do have to set that, you have to set a setting somewhere of basically that is what makes JavaScript the default. Usually, it will ask you.

[00:15:49]
>> It's default format or is the.
>> Okay, so default format has none. Looks like you can have one of your extensions be that and that'll work, that's going to try and run it on everything. There is a way and that might even be you just have to go into this.

[00:16:17] There's a way you can see the JSON version of the configuration you can actually go in and set it just for JavaScript and not for everything. But you do have to set the normal it'll say, hey, I don't have a format or for JavaScript, do you want me to set Prettier to be it?

[00:16:31] And you can just say yes, normally or just prompt you.
>> If you hit Cmd+Shift+P and then type in settings, it'll give you the options between UI or JSON it's in the center.
>> There, you go so here's all of my settings there's probably my credit card information in here somewhere so here we go.

[00:16:55] This is the one you want here, editor. Probably these two. So JavaScript here like that, which is setting it for specifically for the JavaScript language. You can say editor.default format or esbenp.prettier-vscode. And you can see there I haven't set it set for JSON, and I haven't set for JavaScript React as well.

[00:17:20] Thank you. So that's how you're supposed to do it if you wanna set it for just your JavaScript, setting the default format or should probably be just fine. You might have some problems like you try and save us Python files and be like, I don't know how to do this.

[00:17:35] This gonna be a problem to take Nina's course not mine.