Build a Modern JS Project – #4 Pre-commit with Husky & lint-staged

so now that we’ve added linting to the
project it would also be nice to
automate it as well so what I mean by
that is I’d be useful to also run the
lint fix command every time we make a
commit to the repo because even though
we’ve set up automated formatting in all
of our files in vs code of course if I
add let’s say a semicolon to this file
it’ll be auto removed by prettier
because of the config that we’ve set up
using yes lint but it doesn’t mean that
I can’t actually edit the file manually
so for example if I were to go back to
the terminal if I open the directory
myself I could still go ahead and edit
the file manually like this if I add a
semicolon at the end and if I go back to
the terminal
if we do get diff you’re gonna see that
we still get the semicolon at the end so
nothing really prevents me from doing an
ad on that file and doing a commit
afterwards of course we want to prevent
something like this and one way to do it
would be to use something known as
Huskies I’m going to go back to Google
Chrome and I’m gonna look for husky on
github so now this one allows us to use
custom hooks for commands like git
commit or get bush and this one actually
plays very nicely with another package
known as a lint staged so if I look for
that one we could set it up with Husky
as well so we might add a pre-commit
hook so every time we make it commit
we’re gonna run a set of commands for
every JavaScript file so we’re gonna let
them using es lint and if it fails then
we’re gonna get an error in the terminal
so we won’t be able to commit but if the
files are lint is successfully we’re
gonna then add them and after that of
course the commit will be successful so
this one like I said allows us to
prevent bad code from entering the
repository and of course this one might
not necessarily be a concern for a
single developer but if you’re working
on a project that has multiple people
there’s a good chance that people might
make a typo when they rush to commit the
code to the repo so setting up something
like husky might be a very worthwhile as
well so we’re gonna do that and we’re
gonna go back to the terminal so let’s
to npm install a development dependency
of husky and lint staged and then once
that’s done let’s go back to
package.json so we’re gonna set up a
section for husky this will be an object
and then we’ll set up a hooks section so
this will be an object with a pre commit
hook like this so we’re gonna run lint
staged and now this of course is exactly
the same as we have in Aleppo so we can
just copy that paste it in so for every
javascript file we’re gonna run es lint
fix in this case we want to actually run
NPM run lint callin fix so this will
invoke the lint fix script that we’ve
setup so this one priori is led and it’s
also going to fix any issues any files
and also add those changes to the files
so let’s save it and you can see that
pretty are actually beautified
package.json for us so now of course if
I save this file in the editor it’s
going to remove the semi-colon but if I
don’t do that let’s go back to the
terminal let’s do a git status so now if
I to get add let’s add everything so now
if I do get commit – M setup pre-commit
hook so if we do the commit as you can
see we ran the lint script so now if I
go back to the editor you’re gonna see
that the semicolon is gone and if I do a
get status you’re gonna see that all
files were added to the commit we could
even do get log to see the commits that
we have in here so now we can do get
push and this will partially commit to the repo