Supercharge your workflow with Husky, Lint Staged and Commitlint
Published: 2024-05-07 17:15:07

As a developer, I'm constantly scouring for those nitty-gritty details because, let's face it, they make all the difference. But you know what grinds my gears? 🤔 It's when I'm knee-deep in a project, collaborating with a bunch of other devs, and I stumble upon these painfully vague commit messages. Seriously, it's like trying to decode ancient Egyptian scribbles! 😤

It's quite annoying when you are working with a team of highly skilled developers and you find the commit messages like "add some changes", "enhance code" or like "this should probably work-10" 😂.

But don't worry, I got you covered. Here are some of the awesome tooling configuration that I personally use in the projects whether I am working on a project alone or collaborating with other developers.

## Initial Configuration

First install the below packages into your application (Note: these are the configurations for JavaScript and Nodejs, if you're interested in the configurations for some other projects, comment down below).  
Refer the following command to install:

```bash
npm i --save-dev prettier lint-staged husky @commitlint/cli @commitlint/config-conventional
```

The packages we are installing for configurations are:

* prettier: this package formats the code structure according to the guidelines provided in the `.prettierrc`
    
* lint-staged: this package lints down the files and execute the instructions configured in `.lintstagedrc`
    
* husky: this package automatically **lint your commit messages**, **code**, and **run tests** upon committing or pushing
    
* @commitlint/cli @commitlint/config-conventional: these packages provides a runtime scripts for commit checking
    

## Lint Staged Configuration

After installation of all the packages, create `.lintstagedrc` file into the root of your project and copy paste the below code and add it into your file.

```json
{
  "*.{js, jsx, ts, tsx}": [
    "prettier --write",
    "eslint --fix",
    "eslint"
  ],
  "*.json": [
    "prettier --write"
  ]
}
```

You can configure this file in any way you want. If you want to implement any more configurations at the time of staging you can add that in this file.

After setting up the above configuration, create `.prettierrc` file into the root of your project. The below mentioned configuration are some of my favorites but you can change it accordingly.

```bash
{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "bracketSpacing": true,
  "endOfLine": "auto",
  "printWidth": 100
}
```

Now that you have configured the files, run the below command to implement prettier formatter command. This line of code is a script so that if you want to run the prettier script independent of linting and commit.

```bash
npm pkg set scripts.format="prettier --write src/"
```

## Configure Husky

Husky is a powerful software that enhances the ability to commit messages, run code and tests upon committing or pushing.

To initiate Husky, simply paste the below code in your terminal:

```bash
npx husky init
```

This will create a .husky folder and create a pre-commit script file.

Now run the below command to update the default husky pre-commit file with the one configured for lint-staged.

```bash
npx husky add .husky/pre-commit "npx lint-staged --concu
rrent false"
```

After that, you have to setup a prepare script so that your Husky with lint-staged supercharge your commit workflow. Simply run the below commands and let Husky prepare everything for you:

```bash
npm pkg set scripts.prepare="husky install"
npm run prepare
```

YOO HOO🎉  
Your lint-staged configuration is complete. Now we can proceed with configuring the Commitlint.

## Configuration for Commitlint

Commitlint helps you and your team to adhere a commit convention according to the configuration. To install the configuration, perform the following command in the terminal:

```bash
npm install --save-dev @commitlint/config-conventional @commitlint/cli
```

Now, to setup Commitlint into your application, you have to setup a commitlint.config.js file which contains the configuration of your commit syntax.

If you want a simple setup, you have to basically has to execute this below shell command to create a config file as well as write the config line in it:

```bash
echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
```

Now, that you have set up the config file, you have to link it with your project so that, it checks you commit messages when you do a commit. To set up that, you have to run the below command to add the husky hook to integrate the commitlint into your project:

```bash
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
```

This command will create a commit-msg file in .husky folder which contains the configuration to check commits on runtime. If you want to know more into the detail, you can checkout the [link](https://commitlint.js.org/guides/getting-started.html).

And that's basically it 👏. Now you have completed the setup to supercharge your workflow of a project where you can collaborate with many people without thinking of any linting issue.

## **Resources**

* **Husky Doc:**[**https://typicode.github.io/husky/**](https://typicode.github.io/husky/)
    
* **Commitlint doc**: [**https://commitlint.js.org**](https://commitlint.js.org/#/)
    
* **Conventional Commits**: [**https://conventionalcommits.org/**](https://conventionalcommits.org/)
    
* **Lint Staged**: [https://github.com/lint-staged/lint-staged](https://github.com/lint-staged/lint-staged)
    

Thank you! for reading, please leave your comments if any ✌️

Don't forget to bookmark this blog for the future 📌

Connect with the author:

* [**LinkedIn**](https://www.linkedin.com/in/sanchitbajaj02/)
    
* [**GitHub**](http://github.com/sanchitbajaj02)
    
* [**Twitter**](https://twitter.com/solitrix02)