Prettier

[00:00:00]
>> So, earlier I said, okay, and in the options in our ESLint wizard, we had the choice of whether to use it to also enforce some formatting choices. Like for example, semicolons, are they good? Are they bad? Do we always want them? Do we never want them? These type of stylistic questions.

[00:00:28]
And we are not gonna use ESLint for that because there is another tool that's like really, really popular and very good for this, which is called Prettier. It makes your code prettier, I guess is why they called it that. So this is for, it's going to enforce certain style constraints and those are kinda baked into the package.

[00:00:50]
So there can be no debate on your team. There can be nobody changing a rule away from semicolons and then back to semicolons and then away like that, like dueling forces. So if everybody has the same exact version of Prettier, they will have the same exact formatting rules.

[00:01:11]
And this is intended to solve the wasting time debating semicolons problem cuz ain't nobody got time for for that. All right, so the way that we are going to do this install, and so remember we saw that ESLint and VT were both installed as developer dev dependencies, right, development dependency.

[00:01:31]
So, that we can indicate with this save-dev flag to npm install. If we don't use save-dev, it's just going to save it in our regular dependencies, which will be included in whatever the client gets. And so, in this case, we're also using a flag called save-exact, and we'll talk about that in one second.

[00:01:55]
So, okay, we are gonna go back to our project and our terminal and we'll run this command. [SOUND] [LAUGH] Okay, in the command line, we're gonna run that command that we just showed, and what did it do? Because I'm printing the slides [LAUGH] and they included that. Okay, sorry.

[00:02:23]
Don't do that, do this. Okay [LAUGH]. And it says, all right, I added one package and audited a whole bunch. [LAUGH] But I added one package and that hopefully was the prettier that I asked it to install, so let's go look at package.json and see what we got.

[00:02:41]
And so now indeed I have a dev dependency called prettier and this is where we're gonna now notice the difference between that save-exact and leaving it off. Can anybody take a stab at what's happening here? What's the difference between Prettier and ESLint Invent, Vite?
>> It doesn't have the caret up arrow, so it's locking it to a specific version instead of one that's close.

[00:03:10]
>> Exactly, yeah. And so this syntax is like, all right, which versions of this package are acceptable to me? And so, for example, if ESLint says, and and Vite says, hey, we're using five, okay? We don't wanna get four involved because that was a totally different major release, which means there might be breaking changes in five or, there should be breaking changes in five.

[00:03:33]
And, so anything above five hopefully it will be okay, let anything in the fives should will be okay. But Prettier is saying, no, no, I don't just want 3 point whatever, I want 3.1.0, exactly. And that's because the style rules might change between different versions. So, again, to avoid that debate and to avoid any confusion because somebody ran npm install a little earlier than somebody else, we do save exact.

[00:04:01]
Okay, so now, how do we get Prettier to make our code [LAUGH] prettier? So the way that we could do this kind of at the command line, again, we could do npx prettier and then dot, which is going to run the Prettier syntax checker style checker in the current directory.

[00:04:25]
And we can also do this right flag to just have it fix any problems it finds. Like if I have semi colons but the package says not to use semi colons, get rid of the semi colons or vice versa. So what we can do is we can run that command With npx, but we can also just go straight to the adding a script to our package.json stage and run it that way.

[00:04:54]
So now I should be able to do npm run,
>> Format.
>> Format, yes, and again, these are arbitrary, right? I could have called it like, prettify or make beautiful or whatever I want to call it, I'm gonna call it format. And it's okay, look, it did a bunch of stuff.

[00:05:15]
And it's telling me which, so again, npm is telling me, all right, this is the command I just ran, that's what you told me to do in your scripts. And then I looked at all these files. And so for example, I disagree with how ESLint started it's, [LAUGH] it's default JSON file or you have some problems in your HTML even.

[00:05:35]
So Prettier even helps us beyond JavaScript and there are ways to configure this if you only want it to be looking at JavaScript files, for example, but I'll let you all look at the docs for that. And it's telling me which ones it didn't change and the ones that are more salient here are the ones that it did.