npm & Prettier Setup

[00:00:00]
>> So first of all, we've reached our first checkpoint, if you've fallen behind or just wanna start from a clean slate here you can start from 01-no-frills-react. That is the state of the project up until now. From here, we're gonna stop writing React.CreateElement, you will not write this again for the duration of the rest of the class here.

[00:00:29]
We're gonna move into JSX now. The reason why we're gonna do that is because no one ever writes React this way, everyone uses JSX now. I imagine most of you probably have seen JSX before, but JSX really just renders out to this. Again, you can look at the rendered output of your build tool and it looks just like this.

[00:00:54]
All right, so, First thing I need you to open your terminal. This is not a binary, that's Ctrl back tick is how you open and close your terminal in VS code. You can see here I'm in my adopt-me app, and we're gonna start using npm. So we're gonna say npm init, this will start like a brand new npm project, the reason why we're gonna do this is because we need to keep track of our dependencies.

[00:01:28]
You can say this it'll ask you a bunch of questions, I don't wanna answer questions, if you put dash y it just generates everything for you. And I get here a nice package.json. Package.json is where I'm gonna start keeping all of my dependencies. Again, this is very common for every front end, or back end project in node.js.

[00:01:54]
So, the next thing I wanna do here for you is let's put in Prettier. This is as much for me, cuz I am incapable of writing code now without Prettier. Prettier is a tool that just auto formats your code. You can see here I was pretty lackadaisical about where I put semicolons and where I didn't, like for example here.

[00:02:16]
At the end of this React.createElement technically semicolon should have gone there, I wasn't thinking about it nor did I care about it. Cuz normally whenever I just save my file, all of them get magically inserted, I'm just gonna show you how to do that very quickly. Prettier is a tool that auto formats your code for you.

[00:02:35]
And it's why I don't care about semicolons, tab spaces, anything like that, is because this tool at the end of time I hit Save it removes all the code formatting that I've done and it puts in its own, which means I never have to think about it. I had this background thread in my brain that was always thinking about, is this indented enough?

[00:02:53]
Should I put a comma here? Should I not put a comma here? Should I put a semicolon here? Should I not? That that thread of my brain has now totally shut down always and forever because I just let Prettier handle it for me. So, here in your terminal I want you to say npm install and we're gonna install Prettier.

[00:03:15]
What version did we add here? It usually doesn't matter. --save-dev, prettier, and save-dev, so this is gonna go in the developer dependencies, which is where that comes from. You can put save-dev like this, or you can just put -D, it means the same thing. You also don't have to do install like that, you can also just do npm i which is what I do, so you'll see me do npm and i -D, that's in install save dev.

[00:03:48]
That's just the shorthand for that. So we're gonna install prettier@2.7.1. Now you might be asking me, why am I installing a specific version of this? All the dependencies in this course are fixed on certain numbers because I can only control right now what tools you install. So if I just tell you to do this, it'll install whatever the latest version of this.

[00:04:16]
But 6 months later, a year later when someone's taking this course it might break with all the configurations that I have now. So if you're following along with this, what I'm going to invite you to do is follow along with the same versions that I am using because I can guarantee you everything right now fits together and works together.

[00:04:34]
And if it's a year later when you're watching this course, I can't guarantee that anymore. You're welcome to try and upgrade update things. But things are probably gonna break and you're gonna spend some time debugging that which is not what I want you to do, I want you to learn React, the concepts.

[00:04:51]
The concepts are unchanging the individual syntax might change a little over time. So 2.7.1. Does that make sense of why I'm fixing all the dependencies here? Okay, cool. So you'll notice if you go in here in package.json, it still has this little caret here, that basically means that it'll install the latest patch version of this, right?

[00:05:19]
So if you say npm install this again later, it's gonna install, if 7.2 came out, it would install that for you. If you'll notice when you look at my package.json, Here in my GitHub btholt/complete-intro-to-react-v8. Actually, let's the other one. Here you'll notice that I've taken all of those carets out for precisely that reason.

[00:05:56]
So it installs exactly that version. Normally you should leave that in though. And for now it actually doesn't matter because as long as you have the correct version, it doesn't matter to me which one you use. Okay, so here we are, we have prettier installed now. Now let's go use prettier.

[00:06:15]
Well the first thing we need to do is we need to make a configuration object. So here just at the base level of your project, create a new file, call it .prettierrc, okay? Here's where you would configure prettier, and I don't care. So I'm going to give it an empty object which basically says use whatever your defaults are.

[00:06:38]
I really don't care what they are. But if you wanted to do tabs versus spaces or you wanted to have four indent or two indent spaces, this is all the stuff where you'd handle that or single quotes or double quotes. You could configure that here. The only reason that we put in a file there at all is now we can tell our VS code is like if you see a prettier configuration, use prettier automatically.

[00:07:05]
Which you can do here, you can open your settings, so Shift + Command + P and you can say Settings, stuff like that or you can just hit Command or Control. Command on Mac, Control on Windows comma. This will open your settings and you want to turn on Format on Save, this one here.

[00:07:30]
Okay, and the other one that you want to turn on is prettier, getting ahead of myself here. So you do turn on Format on Save and then you wanna install an extension here called Prettier. This one here, Prettier Code formatter. It'll be the one that has a tons of downloads.

[00:07:51]
There's like three or four of them, but the one that has tons and tons of downloads is the one that you want. So install that. Once you've installed that, go back to your settings look for prettier. And the one that you wanna turn on here is, Make sure it's enabled, which one is it?

[00:08:15]
Yeah, prettier here what require config, check that one. Now, if you have two projects, one that is using Prettier and one that is not, it's gonna make sure that there's a config file in the project, if there is it'll use that. If you're on a different project that does not have a config, Prettier is not gonna run.

[00:08:41]
Which is good, because you don't wanna format files that you're not necessarily supposed to, right. Okay, so, we now have that, why is this super useful. Now if I do something like this, does this offend you? It should. But now if I save it, it just fixes it, right?

[00:09:05]
You really can't mess it up now. You can put things on the same line. If I save it, it's just gonna put it right back to where it's supposed to go. Right. So now every time I save my file that happens. So if you see my code jumping around like that it's probably clims saving stuff.

[00:09:29]
Okay, so that's Prettier, any questions about Prettier? So go here to your package.json. I use VS code and most people I know use VS code. Yeah, go ahead. Do we have to set this up every time we start a new project? You don't have to do all the VS code stuff.

[00:09:53]
You do that once, it works forever. Putting a prettier rc file, yeah. For whatever project that you need to use Prettier on you'll put a prettier rc, but everything else, no. So I use VS code. Lots of people that I know use VS code but not everybody uses VS code.

[00:10:09]
Prim Gen doesn't use VS code famously. So, what I like to do is I like to leave the commands here in the scripts of my package.json so that someone that comes by later has the ability to use the tool the same way that I am. So we're gonna write a thing called format here.

[00:10:31]
And I'm just gonna do prettier --write and \ " that, src, Asteriskasterisk/asterisk, and then you can put js and jsx. And you can also put ts and tsx there if you want to, if you're gonna do TypeScript, but for now we'll just have js, jsx. Okay, prettier, which is the CLI command.

[00:11:06]
You don't have to install it, it'll actually just find it directly in your node modules for you, so that's fine as long as it's installed. -- write means that write it back to the file, so overwrite everything. This is escaping a back tick or a double quote here.

[00:11:23]
The reason why you wanna quote this is so that Prettier is literally past the whole string of the path, otherwise like bash will expand it for you. And then you're just saying everything inside of the source directory, that's arbitrarily deep, as long as it has a file extension of js or jsx please format it for me.

[00:11:46]
So now if I say npm run format like this from my directory, it's gonna run that command for me. And you can see here it ran it on src/App.js. It's grayed out, which means nothing changed. But if at app.js, which, let's just format on Save. We're just gonna, Turn that off for just one hot second, and then I'm going to move this and I'm gonna save.

[00:12:22]
And now if I run npm run format, you'll see here one it fixed up here, right? Cool, and then this is not grayed out, which means it actually ran successfully. So now if I'm working with someone like the Primo Gen, right? He can run this, he can just say he doesn't have to go figure out Prettier on his own.

[00:12:37]
I'm sure he has cuz he knows Vin better than anyone anything else. But he could just run my command for me, and we had this like common language to speak, which is why I like putting this all in my package.json. And it just makes explicit like this is a Prettier project I expected to run on these things, so on and so forth.

[00:13:00]
Okay, questions about that? If it's working well we run the script but not working when we save the file what might be a troubleshooting step? I need to turn this back on DF Format on Save checked. Could wait till after if needed. I mean, the thing you can look at here is if you can click on Problems that might tell you something.

[00:13:27]
So the one thing is like, if you have invalid syntax in here, like if I just put semicolons there, Prettier won't know what to do with that. So if you have invalid syntax, which would show up in Problems, And then lastly, you can click on OUTPUT here, and you can look at the Prettier extension.

[00:13:54]
It'll give you a debug logout of stuff that it can't run on. If that's empty that means you don't have Prettier installed properly. So that's Prettier, now it's installed and working, and we can just ignore it going forward.