Exercise: Creating a Validate Script

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kent C Dodds: What we're going to do now, we're first going to create what's called a validate script. We have two things that we want to have run. We want to run both test and linting. And that like validates that our project is good to go. This is something that's really good to have just in general for like receiving contributions.

[00:00:26]
Is like you say hey, if I go clone this repo, I make a fork of it, then clone your fork, then install the dependencies. And then run NPM run validate, and that will run like tests, and the linting, and whatever. We're gonna add the build to it eventually, that way it's really easy for people to know before they start contributing.

[00:00:42]
Whether they have their environment set up properly. It's the same concept behind that setup script that I gave to you. Yeah let's go ahead and do that. Kind of the naive approach to this would be just to add in your package JSON in your scripts, a spelled correctly, validate script.

[00:01:05]
That runs npm run lint and npm run test. And that would work great. npm run validate, so it runs linting first, then it runs a test and it's pretty quick. But I don't know, I like running things in parallel when I can and these two things are totally separate from each other.

[00:01:30]
One doesn't need to run after the other, and so we're going to install a tool called npm-run-all. Which you normally just install in the CLI, but it should already be installed for you. And that will be npm-run-all, right here in your package.json. And the version that we have installed here is 2.3.0, which appears to be the latest.

[00:01:57]
>> Kent C Dodds: So with that installed, npm-run-all, then you can use that in your validate script. And its API is basically just give me a list of scripts that you want to run after the parallel flag. So we want npm run all to run in parallel the scripts called lint and test.

[00:02:21]
Associated with those two things. And then when you run those things it will run a little bit faster because it's running them both at the same time.
>> Kent C Dodds: Any questions, anybody get there?
>> Kent C Dodds: All right, sweet.
>> Kent C Dodds: Okay, so then, now we want this to be like default thing that runs before we commit anything at all.

[00:02:52]
Because I don't wanna like add some code, and then I'm committing something that breaks the test for example. I should say, something that you might be thinking like, well. What if I need to for some reason? Well there's a pretty easy escape hatch. Like if you say git commit and whoop, spelling this correctly.

[00:03:13]
Foo-bar or whatever you want, and then you simply add --no-verify and that will skip all Git hooks. That's actually something really good to know when you start adding Git hooks and stuff, start using those. We're going to add ghooks to add some shareable Git hooks, or installable Git hooks.

[00:03:35]
And then we'll configure ghooks to specify what hooks we want to have run, specifically the validate script. I'll say ghooks, and the latest version, I think, is what we have, 3.2.
>> Kent C Dodds: And again, you already have this installed. And then you don't actually use like a CLI or anything for G hooks you just configure it.

[00:04:01]
And then actually, we will need to install it because it will do some stuff when it's installed. But first we'll just configure it, it's config in your package JSON. Config is an object so again this is kind of what I was talking about earlier. This is where the blast away from npm to configure your stuff.

[00:04:22]
And in here it's ghooks and pre-commit is the hook that we care about. So before commit happens we want to run something and the thing that we want to run is npm run validate.
>> Kent C Dodds: Now to actually get those git hooks installed you do actually need to run npm install --save-dev ghooks.

[00:05:02]
>> Kent C Dodds: And that, you'll notice maybe, your output should probably have this, it says node ./bin/module-install. And that is what is responsible for installing stuff into your git hooks directory. If you pop open your tag .git/hooks, you'll now see a bunch of hooks in here. If you look at commit-msg or post-checkout, you'll see generated by ghooks.

[00:05:28]
Do not edit this file. And this is responsible for looking up in your package JSON what scripts to run and running those scripts.
>> Kent C Dodds: So that is that, here, I'll go ahead and break a test, or I'll add some stuff that's not covered, foobar.
>> Kent C Dodds: Actually, we'll add a linting error too.

[00:06:02]
If I try to commit this, foobar, then it runs those scripts first and it fails, and I still have stuff to commit. The commit failed and now I am increasing the quality of the commits going into my code base which is great. And I can look up and see it's because foobar is defined but never used.

[00:06:25]
I would get the same experience if my test failed, that's cool, fun stuff. Any questions about all of that stuff I just said?
>> Kent C Dodds: Okay, I'll wait a second for chat.
>> Kent C Dodds: Okay.
>> Kent C Dodds: Great, now we're gonna move onto trans-piling.
>> Kent C Dodds: This one's a little bit more involved, it takes quite a bit of configuration and stuff.

[00:07:28]
Who here is familiar with- actually, sorry. Before we do that, let's all make sure we get on the same page with the most recent changes.
>> Kent C Dodds: It is called FEM/06.0-validate.
>> Kent C Dodds: We're gonna get rid of that npm debug log really quick. What is that? Script failed