Check out a free preview of the full Complete Intro to React, v5 course:
The "npm Scripts" 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 create an npm script in the package.json file that allows anyone to run Prettier from the command line with many less keystrokes.

Get Unlimited Access Now

Transcript from the "npm Scripts" Lesson

[00:00:00]
>> Brian Holt: First thing here that we wanna do is we're gonna install Prettier, and I'm gonna show you how to run it from the command line. So inside of your package.json, there's a thing called scripts. Here we have one called test, which we don't have any tests for this project yet, so we don't have anything like that.

[00:00:13] But you can see here that it'll run echo, no test specified. So if I say npm run test, right? It's gonna run whatever is in here, and it's gonna echo error no test specified, right? So you can see right there error, no test specified. So that's what this script is for, it allows you to put some sort of Bash, or ZSH, or PowerShell command in here.

[00:00:41] And then it'll run that whenever you say npm run test, or format, or whatever you put inside of here. So we can put anything in here. I'm gonna put one called format.
>> Brian Holt: And what format is going to do is it's gonna say prettier, so it's gonna run this prettier,

[00:01:04]
>> Brian Holt: And we're gonna run it on everything inside of our source directory. So src/, and then we'll say *., what do I have in here?
>> Brian Holt: Yeah, *./*., and then we'll put here {js.html}, like that.
>> Brian Holt: Then you actually might have to put,
>> Brian Holt: Backslash, like this, like this, okay.

[00:01:56]
>> Brian Holt: So what this is gonna do is this is going to run Prettier on any file and any directory, that's what this **/* means, inside of the source directory that has either a JS or an HTML extension. You need the backslashes here because this'll pass it into Prettier and it allows Prettier to resolve this rather than having Bash resolve it for you.

[00:02:20] And then you come here at the end.
>> Brian Holt: Okay, so if I run this, it's actually not gonna write to it, so I should be able to say npm run format.
>> Brian Holt: And you see that it's actually printing it out, which is not what I want, I want it to actually write.

[00:02:41] So what we're gonna do here is we're gonna say --write.
>> Brian Holt: And you can see there now I have src/app.js and src/index.html.
>> Brian Holt: So this is helpful because there's gonna be someone on your team that doesn't want to integrate with your work flow. So this allows them to just run this command right before they commit and then push it up, right, because you want everyone reading this command on your team.