I wanted to add a CSS linter to my students' portfolio site repository on Github so that I could point out errors in the HTML or CSS code when created. And I wanted to show how one could prevent the deployment of the code to a remote server if such errors were present. And what better way in case of HTML and CSS than with the addition of stylelint to the project workflow.

But of course that would also mean the addition of husky to the workflow. I use the husky npm package to make sure that my code does not contain any errors before I commit my changes to my remote repository. I want it to be production ready!

First I installed the husky package using npm. So:

npm i husky -D

Next, I wanted to enable Git hooks, since that is what husky is all about. So I ran the following command in Terminal:

npx husky install

And then to automatically have Git hooks enabled after install, I edited my package.json by running the following command in Terminal:

npm pkg set scripts.prepare="husky install"

And this resulted in the creation of following local script inside my package.json:

// package.json
{
	"scripts": {
		"prepare": "husky install"
	}
}

Next, I wanted to create a hook that would check whether my CSS had any errors or not. I had already created a local script called validate which looks like the following:

"validate": "npm run stylelint",

And my stylelint local script which validate executes when I run the validate script looked like the following:

"stylelint": "stylelint **/*.css",

What the value of the “stylelint” script means is that within any folder in the root of my project that contains a file with the .css extension, lint it and print out any errors that may come in the VS Code Integrated Terminal console. ** stands for folder, and /*.css stands for any files which contain the .css extension.

Next, I actually had to create a hook which would execute my validate script whenever I would make a (local) commit from within my project. So when the stylelinting would fail, I would not be able to execute the commit.

In order to create a “pre-commit” git hook which would execute my validate local script, I first ran the following in my VS Code Integrate Terminal:

npx husky add .husky/pre-commit “npm run validate”

And the following was returned to the Terminal console:

husky - created .husky/pre-commit

This created a Git hook called pre-commit inside my .husky folder which was created when I installed husky. And inside the pre-commit file, the following was added:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run validate

Then I tested this out to make sure that my husky pre-commit Git hook actually worked when I tried to commit a change inside my project. So I purposely created an error in the styles/main.css file. And then I tried to commit the change. As a result, when I tried to commit styles/main.css, the following was returned in Terminal:

git commit

> professional-portfolio-site-class-demo-fall-2022@1.0.0 validate
> npm run stylelint


> professional-portfolio-site-class-demo-fall-2022@1.0.0 stylelint
> stylelint **/*.css


styles/main.css
 11:1  ✖  Unclosed block  CssSyntaxError

1 problem (1 error, 0 warnings)

husky - pre-commit hook exited with code 2 (error)

I had purposely removed the body element selector rule set’s closing curly brace. As indicated by 11:1 ✖ Unclosed block CssSyntaxError, where the body element selector rule set begins. So then I added back the closing curly brace and tried to commit again.

First I added my new change, which was the fix to the body element selector rule set running git add styles/main.css, and then I ran git commit again.

git commit

> professional-portfolio-site-class-demo-fall-2022@1.0.0 validate
> npm run stylelint


> professional-portfolio-site-class-demo-fall-2022@1.0.0 stylelint
> stylelint **/*.css

On branch main
Your branch is up to date with 'origin/main'.

This time, the commit was a success!

So each time there is an error in my CSS code, I can’t commit that change. I first have to fix the error, stage that change, and THEN execute the git commit command again.

And all this was done by manually installing husky and manually setting up my Git hook.

Related Resources

• husky docs

• Making the Git pre-commit hook work on macOS: maria d. campbell. interglobalmedianetwork.com