Complete Intro to React v4 Complete Intro to React v4

Adding Prettier into Your Editor

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

Make your code editor run prettier for format the code every time you save a file.

Get Unlimited Access Now

Transcript from the "Adding Prettier into Your Editor" Lesson

[00:00:00]
>> Brian Holt: Now what I wanna do is, this is kinda burdensome to go to the command line to have to go format it, so I can actually make my editor do it every time that I save the file. So let's go do that first. So like I said, there is a way you can configure Prettier to have different line lengths, or should I use just double quotes or single quotes.

[00:00:21] I just use the default configuration cuz I don't really wanna think about what configuration that I want. So I'm just gonna say control, and I'm gonna hit make a new file here. I'm gonna save this at the root of my FEM directory. Not in source, inside of this one.

[00:00:38] At the same level as package.json, right? And I'm gonna call it .prettierrc.
>> Brian Holt: It's gonna say, don't use dot and you're gonna say, I wanna use dot.
>> Brian Holt: So this is where you can configure Prettier, right? And I'm just gonna make it an empty object.
>> Speaker 2: So you and source would be great.

[00:01:05]
>> Brian Holt: Root, yeah, the root directory. Why empty object? Because I'm just using all the default configuration. Now you might ask, why do you even need this file then? Because now, my VS code is gonna see that I have a prettierrc file and it's gonna say this is a Prettier project.

[00:01:26] And it's gonna start autoformatting everything, all the time.
>> Brian Holt: So, if you're on VS code, you'll have to install the extension for Prettier. If you just come here on the side, you type in prettier. I already have it installed up here, but it's this one that you want, the one that has 3.7 million downloads.

[00:01:52]
>> Brian Holt: I think it's prettier.io. prettier.io.
>> Brian Holt: You can see here that they have all the extensions down here if you're using a different editor, so just go ahead and grab it from there. It works in, as far as I know all major editors.
>> Brian Holt: Okay, and then now, now that I have that, I'm gonna look at my settings now.

[00:02:24] And, right here this is what I, prettier.requireConfig. This is my favorite setting. It just says if it has a prettier RC file, run formatting. If it doesn't have a prettier RC file, like if you're working another project that doesn't have prettier, you don't wanna change all the lines.

[00:02:46] Then it won't do that. So that here you wanna say prettier.requireConfig, true. You do need formatOnSave up here.
>> Brian Holt: Because VS code has multiple kinds of formatter like Go Format, for example. So this is just telling you that every time that you run, you save. I want you to run whatever formatter is available.

[00:03:17] That's true. So now if I come into app.js, and I wreck all of the formatting again and I just save, it just fixes it for me. Which is pretty cool, right? So now if you see stuff like flying around on my page and getting shift and all this kind of stuff, it's cuz Prettier is running in the background.