What are Git hooks?

First of all, we need to understand Git hooks, imagine you're a team leader and you want to add a pipeline in some project before or after events such as commit, push or receive, basically to do it you need to write a script that will execute before or after your targeted event, This is what we call Hooks in Git.

Implementing Git Hooks : pre-hooks:

in this article, we will cover the pre-hooks, which basically execute scripts before an event, as you know the most important event in git is commit, that's why we need to add some scripts to execute before committing changes, to validate the message of commit and the committed code.

Before we apply this concept on a new react project, we need to add some packages like a prettier & eslint for validate and format our code.

First of all, we will create a react application ⚛️:

yarn create react-app app-name --template typescript

Note: You can create your react application preconfigured with redux or react-router for more info

now after we create the react app, we add husky to the project and configure it :

npx husky-init && yarn

Husky makes it easy to use native Git hooks

Husky will create a folder .husky/ that contains a pre-commit file, this file by default runs this command :

 npm test

you can add all the scripts that you want to be run before you commit your changes :

Tips: pre-commit file runs as bash executable, you can add functions, conditions and more check this !

Now that your config is almost done, we just need to add prettier for formatting your code:

yarn add prettier -D

In the root folder, create .prettierrc file and put your rules check all rules here and install the prettier extension in VScode, it will be a great addition.

You can configure prettier to format your code on save, just add this rule in the VScode config :

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

all we need to finish is commitlint:

yarn add commitizen @commitlint/cli cz-conventional-changelog @commitlint/config-conventional -D

commitlint checks if your commit messages meet the conventional commit format.

we need to install the pretty-quick package that applies formatting only on staged changes:

yarn add pretty-quick -D

we need to add this configuration in package.json :

"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }

also we need to add commitlint.config.js file in root folder and add this basic config:

module.exports = {
  /*
   * Resolve and load @commitlint/config-conventional from node_modules.
   * Referenced packages must be installed
   */
  extends: ["@commitlint/config-conventional"],
  /*
   * Any rules defined here will override rules from @commitlint/config-conventional
   */
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "build",
        "chore",
        "ci",
        "docs",
        "improvement",
        "feat",
        "fix",
        "perf",
        "refactor",
        "revert",
        "style",
        "test",
      ],
    ],
  },
};

finally we add these scripts in package.json:

    "lint": "eslint . --ext .ts",
    "check-types": "tsc --pretty --noEmit",
    "check-lint": "eslint . --ext ts --ext tsx --ext js",
    "prettier-lint": "pretty-quick --staged",
    "commit": "git-cz",

Now that we finished, we can add this configuration in the husky pre-commit file:

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

echo '⚒️⚒️ Let me format your code ⚒️⚒️'

yarn prettier-lint
echo 'passed ✅'
# Check tsconfig standards
echo '🤔🤔 Let me check your typing 🤔🤔'
yarn check-types ||
(
    echo '😂😂 Are you seriously trying to write that? Make the changes required above.😂😂'
    false;
)
echo 'passed ✅'

# eslint time
echo '🤔🤔 Let me verify if you respect our rules🤔🤔'
yarn lint || (
  echo '❌❌Try again after you fix it❌❌'
    false;
)
echo 'passed ✅'

# If everything passes... Now we can commit
echo '🤔🤔 Alright, for me your code looks good, let me trying to build it now.🤔🤔'
yarn build ||
(
    echo '❌👷🔨❌ What I say to you What I say to you ❌👷🔨❌'
    false;
)
# If everything passes... Now we can commit
echo '✅✅ You win this time... I am committing this now.✅✅'

For this to work well, we recommend using yarn commit instead of git commit

That's all, see you soon for another article.