How to lint messages with CommitLint and Husky
How to lint messages with CommitLint and Husky
What is Husky
Husky is a tool that allows you to easily add Git hooks to your project. Git hooks are scripts that are executed at certain points in the Git workflow, such as before a commit, after a commit, before a push, etc. Husky simplifies the process of setting up and managing these hooks.
With Husky, you can automate various tasks or enforce certain rules and checks before allowing a commit or a push. This can include running tests, linting code, formatting files, validating commit messages, and more.
what is CommitLint
CommitLint is a tool that helps enforce consistent and well-formed commit messages in a Git repository. It checks the commit messages against a set of predefined rules or guidelines to ensure that they follow a consistent format.
CommitLint uses a configuration file to define the rules for commit message validation. This configuration file specifies the pattern or format that commit messages should adhere to, as well as any additional rules or requirements.
The most commonly used configuration for CommitLint is the conventional commit format, which promotes a standardized format for commit messages. This format typically consists of a structured message that includes a type, an optional scope, and a subject. For example: feat(user): add login functionality.
Lets make Commitlint and Husky Together
# Step 1. Install commitlint dependency
npm install --save-dev @commitlint/cli
# Step 2. Install conventional commit config
npm install --save-dev @commitlint/config-conventional
# Step 3. Configure commitlint to use conventional commits
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
# Step 4. Install Husky (v7)
npm install --save-dev husky
# Step 5. Enable Husky
# (NOTE: this will also add a "npm test" pre-commit hook)
npx husky-init && npm install
# Step 5.1 (Optionally) Delete the pre-commit hook
rm .husky/pre-commit
# Step 6. Add commitlint commit-msg hook
cat <<EEE > .husky/commit-msg #!/bin/sh . "\$(dirname "\$0")/_/husky.sh" npx --no -- commitlint --edit "\${1}" EEElets install Husky
npm install --save huskywe can run prepare script for Husky
"scripts": {
"lint": "node node_modules/prettier/bin-prettier --check \"**/*.{js,json,ts,yml,yaml}\"",
"prepare": "husky install",
"prettier": "node node_modules/prettier/bin-prettier --check '**/*.{js,json,ts,yml,yaml}'",
"prettier:write": "node node_modules/prettier/bin-prettier --write \"**/*.{js,json,ts,yml,yaml}\""
},Lets add all required dependencies for Commitlint
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prepare": "husky install",
"prettier": "node node_modules/prettier/bin-prettier --check '**/*.{js,json,ts,yml,yaml}'",
"prettier:write": "node node_modules/prettier/bin-prettier --write \"**/*.{js,json,ts,yml,yaml}\""
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@commitlint/cli": "^17.6.3",
"@commitlint/config-conventional": "^16.0.0",
"commitizen": "^4.2.4",
"conventional-changelog-cli": "^2.2.2",
"cz-conventional-changelog": "^3.3.0",
"husky": "^7.0.4",
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
}
create a commitlint config file commitlint.config.js
module.exports = { extends: ["@commitlint/config-conventional"] };Lets create .husky configurations with prepare script from package json script
npm run prepare prepare will create .husky.sh in .husky folder _
#!/bin/sh
if [ -z "$husky_skip_init" ]; then
debug () {
if [ "$HUSKY_DEBUG" = "1" ]; then
echo "husky (debug) - $1"
fi
}
readonly hook_name="$(basename "$0")"
debug "starting $hook_name..."
if [ "$HUSKY" = "0" ]; then
debug "HUSKY env variable is set to 0, skipping hook"
exit 0
fi
if [ -f ~/.huskyrc ]; then
debug "sourcing ~/.huskyrc"
. ~/.huskyrc
fi
export readonly husky_skip_init=1
sh -e "$0" "$@"
exitCode="$?"
if [ $exitCode != 0 ]; then
echo "husky - $hook_name hook exited with code $exitCode (error)"
fi
exit $exitCode
fi
and finally create commit msg Husky Hook
commit-msg
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit $1pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
if [ "$NO_VERIFY_YOLO" ]; then exit 0; fi
npm run lint && npm run prettierprepare-commit-msg
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
if [ "$NO_VERIFY" ] || [ "$NO_VERIFY_YOLO" ]; then exit 0; fi
exec < /dev/tty && node_modules/.bin/cz --hook || true
Now our setup is ready, we can test it
➜ express-apis-monorepo git:(develop) ✗ npm run prettier:write
> express-apis-app@1.0.0 prettier:write
> node node_modules/prettier/bin-prettier --write "**/*.{js,json,ts,yml,yaml}"
commitlint.config.js 30ms
jest.config.js 7ms
pnpm-lock.yaml 665ms
pnpm-workspace.yaml 24ms
➜ express-apis-monorepo git:(develop) ✗
➜ express-apis-monorepo git:(develop) ✗ git commit -m ""
> express-apis-app@1.0.0 lint
> node node_modules/prettier/bin-prettier --check "**/*.{js,json,ts,yml,yaml}"
Checking formatting...
All matched files use Prettier code style!
> express-apis-app@1.0.0 prettier
> node node_modules/prettier/bin-prettier --check '**/*.{js,json,ts,yml,yaml}'
Checking formatting...
All matched files use Prettier code style!
cz-cli@4.2.4, cz-conventional-changelog@3.3.0
? Select the type of change that you're committing: (Use arrow keys)
❯ feat: A new feature
fix: A bug fix
docs: Documentation only changes
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
refactor: A code change that neither fixes a bug nor adds a feature
perf: A code change that improves performance
test: Adding missing tests or correcting existing tests
(Move up and down to reveal more choices)
Comments