Enhancing Your Development Workflow with Husky, Commitlint, Prettier, and Lint-Staged

Setting up an automated workflow can greatly enhance code quality and consistency in your projects. In this guide, we’ll walk through setting up Husky, Commitlint, Prettier, and Lint-Staged to ensure your codebase is consistently formatted, follows commit message conventions, and has up-to-date dependencies after each merge.

Setting Up Husky

Husky helps you manage Git hooks effortlessly, allowing for automated tasks like code quality checks to run before every commit.

Installation

Install Husky as a dev dependency using npm (we will be using npm in this article):

1npm install --save-dev husky
Copy

Initialization

To create a .husky directory where Git hooks will be stored, run:

1npx husky init
Copy

Next, add the following script in your package.json to set up Husky when installing dependencies:

1"scripts": {
2  "prepare": "husky install"
3}
Copy

Configuring Commitlint

Commitlint ensures that all commit messages follow a consistent format, maintaining a clean commit history.

Installation

Install Commitlint along with a conventional config:

1npm install --save-dev @commitlint/config-conventional @commitlint/cli
Copy

Setup

1. Create a commit-msg hook in .husky: Now create a new file in .husky directory named commit-msg and add this line:

1npx husky add .husky/commit-msg "npx --no-install commitlint --edit \"$1\""
Copy

2. Add a commitlint.config.js file to the root of your project with the following content:

1module.exports = {
2  extends: ['@commitlint/config-conventional'],
3  rules: {
4    //   TODO Add Scope Enum Here
5    // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']],
6    'type-enum': [
7      2,
8      'always',
9      [
10        'feat',
11        'fix',
12        'docs',
13        'chore',
14        'style',
15        'refactor',
16        'ci',
17        'test',
18        'revert',
19        'perf',
20        'vercel',
21      ],
22    ],
23  },
24};
Copy

Adding Lint-Staged and Prettier

Lint-Staged allows you to run scripts on staged files, and Prettier enforces a consistent style in your codebase.

Installation

Install both as dev dependencies:

1npm install --save-dev lint-staged prettier
Copy

Prettier Configuration

Create a .prettierrc.json file in your project root with your preferred configuration. Here’s an example:

1{
2  "plugins": ["prettier-plugin-tailwindcss"],
3  "printWidth": 120,
4  "useTabs": false,
5  "tabWidth": 2,
6  "trailingComma": "es5", 
7  "semi": true, 
8  "singleQuote": true,
9  "bracketSpacing": true, 
10  "arrowParens": "always",
11  "jsxSingleQuote": false, 
12  "bracketSameLine": false,
13  "endOfLine": "lf"
14}
Copy

Lint-Staged Configuration

Add the following configuration to your package.json under lint-staged:

1"lint-staged": {
2    "**/*.{js,jsx,ts,tsx}": [
3      "eslint --max-warnings=0",
4      "prettier --write"
5    ],
6    "**/*.{html,json,css,scss,md,mdx}": [
7      "prettier -w"
8    ]
9  }
Copy

Add a pre-commit hook to run Lint-Staged:

1npx husky add .husky/pre-commit "npx lint-staged"
Copy

Adding a Post-Merge Hook for Dependencies

A post-merge hook ensures that your dependencies are updated after each merge by running npm install or any package manager.

Create a post-merge hook:

1npx husky add .husky/post-merge "npm install"
Copy

Conclusion

With this setup, your project will maintain a standardized commit message format, automatically format code, and keep dependencies up-to-date post-merge. This robust workflow will streamline collaboration and improve code quality, helping you focus on building great features.