Husky, Commitlint, and Prettier Configuration

In this configuration there are 2 things that will be checked

1. Checking the commit message following the conventional commits, it will fail to commit if the commit message is not following the rule.
2. Writing prettier changes before each commit. This is done to prevent developers that did not have prettier installed in their machine.

1. Initialize Husky

yarn add --dev husky
 
npx husky init

It will initialize all of the needed files including a sample pre-commit hook.

2. Add Commitlint

First, install the dev dependencies

yarn add -D @commitlint/config-conventional @commitlint/cli

Then, create a new file in the husky folder

npx --no-install commitlint --edit "$1"

Create commitlint.config.js, you don't need to override the rules if you don't want to

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    //   TODO Add Scope Enum Here
    // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'chore',
        'style',
        'refactor',
        'ci',
        'test',
        'revert',
        'perf',
        'vercel',
      ],
    ],
  },
};

Commit message will be checked before commit now. 🚀

3. Add Lint Staged & Prettier

Install dependencies

yarn add -D lint-staged prettier

We're using lint-staged so prettier doesn't have to run on all files, but only the staged files.

Add this to package.json, or save it as a .lintstagedrc file

{
  // ...existing code, you can split the html,css,json if you add eslint to configuration
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      // If you have eslint configured, this is a great place to include it
      "eslint --max-warnings=0",
      "prettier --write"
    ],
    "**/*.{html,json,css,scss,md,mdx}": ["prettier -w"]
  }
}

Then add this to .husky/pre-commit

npx lint-staged

You can also add test command or eslint check here if you want to do test before each commit

4. Add postmerge hook

Use this to add hook, so husky will run yarn everytime we pull changes.

yarn

You can also replace yarn with pnpm install npm install or whatever you're using