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.

Initialize Husky

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

pnpm add --dev husky npx husky init

Add Commitlint

First, install dev dependencies

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

Then create new file called commit-msg in the .husky folder

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

Create commitlint.config.js at root project, 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. 🚀

Add Lint-staged & Prettier

Install dependencies

pnpm 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

Add postmerge hook

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

pnpm

You can also replace pnpm with other package manager.