Setting Up Husky and lint-staged for a Clean Codebase

Introduction

Maintaining a clean and consistent codebase is very crucial for every project. There are some tools in the market that help you automate the code quality checks. Husky and lint-staged are one of them that prevents bad commits from ever reaching your project repository. In this blog, we will guide you step by step to setup Husky and lint-staged in your project.

Why Use Husky and lint-staged?

• Husky: It helps you run scripts at specific Git hooks (e.g., pre-commit, pre-push), ensuring automatic checks execution.
• lint-staged: It optimizes the process by running linters only on the files that are staged, improving the overall performance and speeding up the workflow.

Prerequisites

Before we start setting up, make sure your system has following things installed:

• Node.js
• Git

Step 1: Initialize Your Project

If you don’t have a project setup, you can create one using below commands:

mkdir my-project
cd my-project
npm init -y

Step 2: Install Dependencies

Install Husky and lint-staged as development dependencies:

npm install --save-dev husky lint-staged

Step 3: Configure Husky

Husky requires initialization to set up Git hooks:

npx husky

Add the below script in the package.json to make it easier to re-install Husky hooks after cloning the repository and add lint-staged script that we need for pre-commit hook.

"scripts": {
  "prepare": "husky install",
  "lint-staged": "lint-staged"
}

Edit the .husky/pre-commit file and add the below command.

npm run lint-staged  // running the lint-staged script we added earlier

Or you can manually create the file using file system under .husky/ or follow below commands to create one:

echo "npm run lint-staged" > .husky/pre-commit
chmod +x .husky/pre-commit

This will create a .husky/pre-commit file containing the command to run lint-staged.

Step 4: Configure lint-staged

Add a lint-staged configuration to your package.json:

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{css,scss,md}": [
    "prettier --write"
  ]
}

Or you can create a .lintstagedrc.json file for the configuration:

{
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{css,scss,md}": [
    "prettier --write"
  ]
}

Step 5: Install Linter Tools

To ensure that the lint-staged configuration is working fine, we need to install the required tools:

npm install --save-dev eslint prettier

Initialize ESLint and Prettier configurations:

npx eslint –init

Create a .prettierrc file with your desired formatting rules. For example:

{
  "semi": false,
  "singleQuote": true
}

Step 6: Testing the Setup

Make a small change to any file and stage that file using git command:

git add .

Now let’s commit the changes:

git commit -m “Testing the husky and lint-staged setup”

Now it can be seen that the lint-staged is running the configured linters on the staged files before the commit is completed.

Optional: Adding More Hooks

We can add additional Git hooks using husky.
For example: we can add a pre-push hook that will run test suite before we push the code to remote repository:

echo "npm run test" > .husky/pre-push
chmod +x .husky/pre-push

Conclusion

By completing the setup for Husky and lint-staged a safety net have been added to the project. This ensures that the code adheres to the standards that have been defined, preventing potential issues in the early stage of development. The setup is more beneficial when multiple developers work on a single project as it prevents the developers from making bad commits.

For more such blogs and updates follow Front-end Competency.

Follow NashTech Blogs for more amazing blogs.