Fix Your Mistakes, Don't Commit Them! Pre-Commit Git Hook Checks with Husky and Lint Staged.

hey how's it going everyone it's lee halliday and in this video we are going to learn how to stop ourselves from committing code that has typescript issues eslint problems hasn't been prettierized and that has failing tests stop ourselves from committing those into our git repository and we're going to use git hooks for that specifically husky and lint stage to help us out so to get started we're going to start with nothing and we're going to create a brand new create react app so npx create react app and we're going to call it the husky demo and we're going to use the typescript template that will set us up all of those ts config files and all of that so let's give it a minute to install and then we'll get going all righty so let's go into the husky demo folder and now we're going to install and initialize husky so for that we say npx husky init and then when that's done we're just going to run yarn so that it installs all of the dependencies so when this is done we're going to open up this folder in our vs code and see what files it is added or modified so once it finishes highlighting this we will see that it's tweaked our package.json and what it's done is it's added a new prepare script that will install husky on other developers computers that are using this um this package this uh project we're building and it's also installed husky as a dev dependency so more importantly we have this dot husky folder that has a file in here called pre-commit so git comes with all sorts of hooks you can hook into pre-commit post commit post merge which we're already we're all which we're also going to be taking a look at today and basically you're going to have one file per git hook that you're using so we're going to modify our pre-commit to instead of running our tests we're going to say run the yarn typescript command so if we were down here in the console what we could do is we could add the files and then commit them so we are installing husky and so prior or pre-commit to committing these files it's going to run yarn type check which it did but it found no issues so it went ahead and it um it committed this hey i just wanted to mention that i created a course i'm really proud of called next level next js where we build a full stack app start to finish using a whole bunch of technologies i'm pumped about so that would be apollo both on the client and the server to build a graphql application we use prisma to connect to our database we use typescript we use maps so it's a really cool app where at the end of it you'll know how to create your app from start to finish full stack and then you can take this and build your own project with it so it's 49 us dollars and there is purchasing power parity if you come from somewhere where that is a little bit too steep so head to next.leeholiday.com and check it out i would really appreciate it thanks so now what we're going to do is basically add in some other checks so we want to check for eslint prettier and run our tests and we could add them here but then it's going to run them basically even if you change a markdown file or something that's completely unrelated to running tests in your system so instead we're going to add another package called lint staged so we're going to add as a dev dependency lint staged and also prettier so what lint stage does is it basically allows you to only run these commands when certain files are being staged or about to be committed so we can go into our package.json come down here to the bottom and what we're going to do is we're going to add a lint staged and then we want to give it a pattern of files to look for so we're going to say in any folder any file name with these extensions so js jsx ts tsx run this array of commands so the first one we're going to get it to run is eslint then we'll run prettier and we'll say write any changes that it produces so normally like my vs code does this for me but now no matter who is using this no matter what their setup is it's going to run it through prettier and write those changes prior to committing and the last one will be yarn test and we need to set a few flags here we want to say watch all is false that's because in create react app it runs it in this like interactive setup we don't want that so just no watching and we're going to say find related tests and that's because if you've just changed one file why run your entire test suite your ci should be doing that in this case it's going to try uh tests that are related to the files that you're staging and just run those ones and we'll tell it to bail as well so when does lint sage gets run so you could run it now right yarn lint staged it's going to say we haven't staged any changes so it's not going to run anything but what we want to do is tie husky and lint stage together so we'll go back to this pre-commit file and we'll say yarn lint staged so now it's tied into the pre-commit hook to run the type check and anything we have here in lint staged so why don't we try to get it to produce some some failures so it will stop us from committing so we're going to create two first let's make a test fail so we're going to come in here to our app and we're going to change this text to learn husky just like this and our test is looking for the text learn react so this should begin to fail and see how this file here isn't being used it's sort of grayed out we want to stop unused variables or unused locals from being committed so we can do that in typescript by just configuring our ts config to say no unused locals is now true so if we came back here now it's going to write a squiggly under here so if we add these files stage them try to commit so adding lint staged what it's going to do is first it's going to run typescript which should fail and it's saying hey you need to fix these two issues before i'm going to allow you to commit now keep in mind you could add no verify to basically skip these checks but that's generally a no no like that sort of goes against the whole point of why we're doing this so let's fix our code instead so fix that one fix this one oops let's add them again and now let's commit them so now typescript should pass but our test should still fail so it's running eslint prettier and now it's running the tests and hopefully one of these fails which it did so it tells us which test failed and it's basically our job to go and correct that so we can go into our text our test and say we're looking for learn husky and now we should be able to let me just go back and use the same one as before so now everything should pass and it should allow us to commit so ts check past lin eslint prettier and our tests should all be passing finally it allowed us to commit but now we know that we're committing code that has everything good to go so the last thing i want to cover is basically tying in the post merge github and what we're going to do is whenever we pull code from github or from a different branch it's going to run yarn or yarn install because if another developer on our team added some packages i don't even want to think as soon as i pull down that code just install any changes so that i can use the code how it is so to do that we're going to say okay npx husky we're going to add to the dot husky folder a post merge to the post merge file we're going to add the command yarn just like that so we now have post merge yarn and we're going to commit this so get add commit adding post merge and now it's time to sort of see this in action so let's go to a different branch so we're going to create a new branch called just a feature branch i don't know what it whatever the feature is and we're going to create a new file just so we can get a commit so touch something dot md let's commit this adding something something.md file cool so once it's finished um committing this we're going to go back to our master branch and i want to merge in the code from feature so i could say git merge feature or a little trick if you didn't know this you can just say dash to be the last branch that you were on so that would be feature so when it merges this in you can see that it does a yarn install and that's because of the post merge hook that will automatically try and install any changes that you've made to the packages in your in your project so that's everything that i wanted to cover today basically we learned how to use two git hooks pre-commit to basically check our code before putting into our git repository and in that we ran our typescript checked and we used lint staged to only run checks certain checks if certain files have changed and then we also use post merge to install any changes for new packages added to the package.json file and that's how you can use husky together with lint stage to stop yourself from putting that code into your repository alright that's it take care bye

Channel: Leigh Halliday

Views: 20,172

Keywords: git hooks, pre-commit hook, javascript tutorial, husky tutorial, lint staged tutorial

Id: oWty0Nw1ydk

Length: 10min 21sec (621 seconds)

Published: Mon Apr 05 2021