Exercise: Using Commitizen

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

[00:00:04]
>> Kent C. Dodds: I'll just show you, we're gonna be adding a new script. I'll explain what that script does. We are adding a couple of dependencies, commitizen is the tool that will help generate this. And this is a plug-in for the tool that will tell commitizen what questions to ask us and what to do with the answers.

[00:00:27]
Then validate commit message from yours truly. It's gonna validate that our commit messages follow the format. And we'll add that as a Git hook. So let's go ahead and do those things.
>> Kent C. Dodds: So we're gonna npm install and you'll actually want to run this as dev dependency, commitizen cz-conventional-changelog, and then also validate-commit-msg message.

[00:01:08]
>> Kent C. Dodds: Boy, somebody needs to update minimatch. Okay, sweet, so with those changes we can see in our package.json we have commitizen, cz-conventional-changelog, and validate-commit-msg
>> Kent C. Dodds: Then the first thing that we're going to do because it's the easiest and most straight forward. Is we're going to add a Git hook right here.

[00:01:33]
The commit.msg hook. So these are standard git hooks. It's just the name of the git hook. If you pop up your gits, we don't at those, or at least I don't have those. I'll show you how to reinstall those here in just a second, but yeah, it's the commit-msg hook, so the one that is run before you apply a commit message.

[00:01:57]
And we will just simply put in here, validate-commit-msg, M-S-G.
>> Kent C. Dodds: With that configured, and if you notice that you don't have a hooks directory in here with the generated code. Then you can run npn i ghooks, and it's actually technically gonna go out and reinstall git hooks. But it'll run the git hook module install, which will add your hooks, and now you have this commit message, hook.

[00:02:34]
So now if I try to commit all the things with blah blah blah, that doesn't follow the commit message, it doesn't have the scope, it doesn't have a type. Then I'm going to, first, it runs the test, then it's gonna try to apply the commit message, and it's gonna fail on me and say, INVALID COMMIT MSG: does not match this name.

[00:02:51]
And then it'll tell me what the message was that I gave it, blah blah blah. So that's kind of handy, so you can make sure that you're not messing things up for your releases and for your change log. So it's basically like you're validating your change log here.

[00:03:05]
It's not just validating your messages, but you're making sure that the change log that you're delivering to your users is solid.
>> Kent C. Dodds: Anybody to that point, validate commit message?
>> Kent C. Dodds: Anybody who's able to follow along, I guess, whoever's left. [LAUGH] Anybody online here so far?
>> Kent C. Dodds: Okay, looks like Ivan got semantic release CLI installed, that's great.

[00:03:42]
>> Speaker 2: And we'll be posting all these videos afterwards so the best way is to follow along and get the gist of it, and then follow back through the videos then you can pause and watch it.
>> Kent C. Dodds: Yep, awesome, good point. Some of this stuff, I knew that this was going to be a little bit risky to do this stuff where you're setting up your own stuff.

[00:03:59]
Lots of you probably haven't done this kind of thing before. So if you are following along, and all this stuff is able to keep up or stay up, then that's awesome. If you're not, the video will be made available to you right away. Unedited, but then the edited version will be up later too.

[00:04:20]
So that's cool.
>> Speaker 3: Where is that?
>> Speaker 2: The livestream?
>> Speaker 3: Yeah.
>> Speaker 2: I'll post it in chat. Are you in chat?
>> Speaker 3: Chat. Okay.
>> Speaker 2: Actually on chat, if you go to the top, the workshop links is to GitHub repo.
>> Speaker 3: Okay.
>> Speaker 2: And I'm kind of rolling up all links in there.

[00:04:36]
>> Kent C. Dodds: Sweet. All right. So now we can validate our commit message, but typing out the commit message sometimes might be a little bit tricky. And so we're going to use this commitizen thing that we installed to make it easier for us to to generate that commit message. So let me just make sure here so the pretty much the only thing that we need to do, because we installed this CZ conventional changelog.

[00:05:07]
Is we can go to this config section and add a commitizen section in here where we specify the path to the plugin. And the path is just like as if you were to require a module. Because this is installed in our node modules, we can just specify cz-conventional-changelog and then it will use that.

[00:05:37]
>> Kent C. Dodds: One little fun fact, I don't really like installing things globally, but if you wanted to ,you could install commitizen globally and it will add git cz command for you. You just hit Enter, and it'll do the auto, like, same kind of thing. I'm pretty sure that's what it is.

[00:05:58]
But like I said, I don't like installing things globally, because it's not available. If I install it globally, I'm doing something different from the people who are using my library or contributing to the library. And so I prefer to install things locally. So there's one other thing we're gonna do, and that is add a script for this commit.

[00:06:15]
So we'll call it commit. And commitizen adds a binary to our node_modules. If we look in node_modules.bin, there it was. Is git-cz. So I use that. And with that you should be able to run npm run commit.
>> Kent C. Dodds: Something busted. [LAUGH]. Yeah, so it also expects that you have everything added, or staged, that you want to have as part of the commit.

[00:06:53]
So if I look at my git status, I have these two things modified. I can look at the dif and see okay we're adding a release after the end of success of our validate. We're updating the version to be semantically released, we're adding a script, we're adding a release script, we're adding commitizen, cz-conventional-changelog, semantic-release and validate-commit-msg.

[00:07:18]
And then commitizen. We're configuring commitizen and adding a commit message git hook. So I want to commit all of these things. So I'll just say git add, everything from here on down. Now if I look at my status, I'll get those things. And now I can run npm run commit.

[00:07:38]
And it gives me this prompt. So I can say okay, what type is this? Most of this actually would be a chore, but just for the purposes of this demo, I'm going to say it's a fix. And the scope of this would be probably dependencies, this is kinda loosey goosey, to be perfectly honest, kind of whatever you wanna call it.

[00:08:07]
I mean, I'll just say deps. Add semantic-release and friends. And then for the longer description, i don't know. Add some stuff that's great. We're not actually closing anything, but if we had an issue opened then we'd say, Closes #4, whatever. GitHub already, without all this other stuff, if your commit message, you have closes, or fixes in there, and then references number whatever, and it will actually close that issue on GitHub.

[00:08:47]
Which is pretty handy, use that sometimes. So I'll hit enter and now it's gonna run my git hooks.
>> Kent C. Dodds: Well that's interesting. I didn't get any output.
>> Kent C. Dodds: Did it run anybody else's git hooks? It should've run git hooks, so that's weird. But it looks like it worked.

[00:09:07]
If we look at the log, then you should see a formatted commit message that follows the format that we looked at, pretty handy. I'll be perfectly honest. I actually don't use this very often. I kind of prefer to author it myself. But it is really, really helpful for people who are just getting into this.

[00:09:27]
And so you can add this to your documentation, when do you wanna commit, then use this thing. The cool thing is that this doesn't put up a barrier to contributors because GitHub added a sweet new feature to pull requests. That when you merge a pull request, you can choose squash and merge, and at that time, you can update the commit message in the UI.

[00:09:47]
And so if they mess up the commit message, it's not a big deal, because you can update it yourself before it gets merged. And they still get the attribution for the commit and everything. It's just, you can update it to follow the standards so it's released properly. Cool, so with that you should be able to git push and just hope that it works.

[00:10:10]
>> Kent C. Dodds: So we'll look at our Travis,
>> Kent C. Dodds: And we'll do github-names.
>> Kent C. Dodds: And jump to our Build History so we can jump right to the build. And it'll take a second, so I will wait for questions.