Check out a free preview of the full Complete Intro to React, v5 course:
The "Prettier Setup" Lesson is part of the full, Complete Intro to React, v5 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates how to install the Prettier extension in VS Code, create the prettier configuration file, and set it to auto-format on save only when the configuration file exists.

Get Unlimited Access Now

Transcript from the "Prettier Setup" Lesson

[00:00:00]
>> Brian Holt: Now as you can see here, I haven't been using that. I actually have it runs prettier every time I run save. So I'm gonna show you how to do that. So inside of VS Code, go to the Extensions, which is this one here, and I have one called prettier.

[00:00:21] Which I'm pretty sure is this top one here. Yep, this one. It's the one that has a lot of downloads. So over eight million and just say install
>> Brian Holt: Okay, once you have that installed, then I want you to go to your Settings. So you can either do that through Code Preferences Settings or Command Comma.

[00:00:50] And then you need to turn on two things for me. One of them you wanna turn on is Format on Save.
>> Brian Holt: So the editor format on Save, check that one, that's probably off for you. The second one that I want you to check is require config. So prettier down here, you can see, mine's not checked.

[00:01:17] So prettier, require config.
>> Brian Holt: So check that one. So you want prettier to run but you only want it to run on projects that prettier's actually installed on, right? You don't wanna go on to some other project and have prettier run on it because then you're going to modify literally every line of code and then the get blame is gonna be on you for every line of code which is unfun, I will say.

[00:01:46] So now that I've done that, this project doesn't have a config yet, we haven't made one. So if I go and do this, I'm saving it, and notice that it's not fixing it. That's what we want right now, right? We only want it to run on projects where it has prettier.

[00:02:00] So the next thing we're going to do is we're going to create a config file. So create a new file save it to the root directory here adopt me and you have to call this call it dot.prettierRC.
>> Brian Holt: I don't even know what RC stands for, but that what all the bash config files are called.

[00:02:28] We're gonna create one called the ES lint RC, prettier RC, MVM RC, MPM RC. Does anyone know what that stands for? Me neither. Okay, prettierRC make that file. Yes I know it's a reserve file, that's on purpose. And then I need you to put two magical characters in here, empty objects.

[00:02:54] Now there are a few things you can configure about prettier, you know, if you want to be tabs or spaces, do you wanted to have spaces here, or not have spaces there? There's a few things. I told you, I don't actually care, I just want it to work.

[00:03:08] So this is just saying, give me the default config. But if you want it to have some sort of config in here, you could say, "singleQuote": false. I only wanna have double quotes or single quotes, true. I only wanna have single quotes, right? It'll be things like that, but, again, I don't care, so I'm just gonna put empty object here.

[00:03:34] So now if I go back over two app.js and I save, now it'll actually use. It'll run prettier on every single time that I save which is what I wanted.
>> Brian Holt: This can be done with sublime. This can be done with other editors as well. Just read it off of prettier's website.

[00:03:52] They'll tell you how to do it.
>> Brian Holt: Questions about that? Is that working for people? Cool. Again I love this because it means I get to shut down like a part of my brain that thinks about formatting things. Like typically when you paste something and it's like, okay well this has to go here and I have to convert these spaces to tabs and stuff like that.

[00:04:14] You just get to shut down that thread of your brain and focus more on code. There aren't really very many alternatives for prettier so if you want to have a code format or if that's something that you want prettier's by far the standard. There may be others but it’s either this or nothing.

[00:04:32] ESLint has a thing called fix which you can use that as well but it’s not the same thing.