Complete Intro to React v4

Complete Intro to React v4 Adding Prettier CLI Script


This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React v4 course:
The "Adding Prettier CLI Script" 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:

Create a command line script to format code with prettier. This script can be ran by your CI system or developers who don't have prettier integrated into their editor. Add the format script to your package.json.

Get Unlimited Access Now

Transcript from the "Adding Prettier CLI Script" Lesson

>> Brian Holt: Something I want you to do now, not all of your colleagues are gonna bite off right away on installing Prettier into their editor. Some people get freaked out when stuff starts moving around. So you can be a good person and come into scripts and give them the ability to run it from the command line.

[00:00:15] It's kind of, again, a good rule of thumb is anything you expect people to do, you should write it into your scripts here. So what we're gonna do now is we're gonna do format,
>> Brian Holt: And it's gonna be prettier.
>> Brian Holt: And we want prettier to run every js file and css file, cuz it also does css.

[00:00:38] It does json, it does html, less, sass, it does a lot of different kinds of files.
>> Brian Holt: So we want it to run on,
>> Brian Holt: So you have to surround these in slash quotes. These are escaping the quotes, right? Because it's already inside of double quotes cuz it's JSON.

[00:01:02] And we want it to run on every source file inside of,
>> Brian Holt: I think this is right.
>> Brian Holt: And then we want it to run on every file that is .js or jsx or css or html or json, cuz we have all of those.
>> Brian Holt: And you also want it to write.

>> Brian Holt: So let me just make sure that actually works before I explain it. So if I say, save, npm run format.
>> Brian Holt: It doesn't work on HTML, okay, not out of the box.
>> Brian Holt: Okay, cool.
>> Brian Holt: So talk about this for just a second. format, so now if I give this to my colleague that's old school VI user that refuses to install any extension, we all know the type, [LAUGH] right?

[00:02:26] You can say, okay, you don't have to install it into your editor or anything like that. Anytime before you commit, just run, npm run format. And it'll format all of your code the correct way. So now kf I come over here to my project and I say, npm run, whatever is here, so npm run format, it's gonna run this bash command for them, right?

[00:02:48] So, npm run format, it's gonna go run on App.js and style.css, and it's gonna format those things correctly for me, right? Now, I will never run this code because it's already installed in my editor, right? I don't need to, but someone else might. What's also useful about this is now I can run this in CI, my continuous integration, and if someone tries to check in code that has not been formatted by Prettier, you can just say, hey, Prettier, throw an error.

[00:03:23] Which I think if you wanted to do that, the way that would look would be format:check, and it would be --check-different, I think.
>> Brian Holt: Let's try it, let me just make sure that, prettier.
>> Brian Holt: There is a lot of configuration here. --list-different, that's what it is. Okay, so now what you can do, npm run format:check.

[00:04:05] You would run this on TravisCI, or CircleCI or something like that.
>> Brian Holt: And right now, it's gonna pass, nothing gets outputted, there's no errors or anything like that.
>> Brian Holt: So that means that this will pass CI, but if something was not checked in with prettier run, let's just try that for just a second.

[00:04:28] Can I turn off prettier?
>> Brian Holt: All right, so,
>> Brian Holt: Just to show you what it looks like when it fails, false, save.
>> Brian Holt: Okay, so now if I do, npm run format:check, it's gonna say, hey, App.js wasn't formatted with the prettier, I'm gonna throw an error. And then this would be caught by your CI.

[00:04:55] And your CI would say, you can't check that in.
>> Brian Holt: true.
>> Brian Holt: Okay, any questions about prettier before we move on?
>> Brian Holt: This is my favorite tool. I've been coding with it for like two years now and I can't code without it.
>> Brian Holt: So there's not really an alternative right now to prettier, which is okay, it's doing great.

[00:05:37] During the course of this entire course, I will try and point out if there's alternative technologies that you can use, because I'm gonna give you an opinionated stack, right? I'm gonna give you the things that I like to use that I think it's a good idea for you to use.

[00:05:53] But I hopefully will also show you how to plug in different things if you have different opinions than I do, so that you can kind of construct your perfect frontend stack.