Setting Up Husky and ESLint for a Cleaner Development Workflow

WebSetting Up Husky and ESLint for a Cleaner Development Workflow

Setting Up Husky and ESLint for a Cleaner Development Workflow

5 mins Read

Build with Radial Code

Radial Code Enterprise gives you the power to create, deploy and manage sites collaboratively at scale while you focus on your business. See all services.

Contact sales

What is ESLint?

ESLint is a powerful static analysis tool that helps developers identify and fix problems in their JavaScript/TypeScript code. It enforces best practices, improves code quality, and reduces potential bugs.

Benefits of ESLint

Detects syntax errors and potential issues
Enforces consistent coding style
Provides auto-fix suggestions
Supports custom rules and plugins

What is Husky?

Husky is a tool that allows you to run Git hooks easily. Git hooks are scripts that execute automatically before or after Git actions, such as committing or pushing code.

Benefits of Husky

Ensures that code is properly linted before committing
Prevents broken code from being pushed
Helps enforce team-wide coding standards

Setting Up ESLint and Husky in a Project

Now that we understand the importance of ESLint and Husky, let’s set them up in a project.

Step 1: Initialize a Node.js ProjectIf you don’t have a package.json file in your project, initialize a Node.js project by running:

npm init -y

This will generate a package.json file in your project directory.

Step 2: Install ESLintInstall ESLint as a development dependency:

npm install eslint --save-dev

Next, initialize the ESLint configuration by running:

npx eslint --init

You will be prompted with several questions:

What type of modules does your project use?Choose either CommonJS or ES Modules.
Which framework does your project use? Select the appropriate option: React, Vue, or None.
Does your project use TypeScript? Choose Yes or No based on your project.
Where does your code run? Choose Node, Browser, or both.
What format do you want your config file in? Choose JSON, JavaScript, or YAML.

This will generate an .eslintrc.json file with the selected configuration.

Step 3: Install Prettier (Optional but Recommended)Prettier is a code formatter that works well alongside ESLint. Install Prettier and its ESLint plugin:

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Now, update your .eslintrc.json file to include Prettier configurations:

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

This ensures that Prettier handles code formatting and ESLint handles best practices and potential errors.

Step 4: Install HuskyInstall Husky as a development dependency:

npm install husky --save-dev

Then, enable Husky in your project:

npx husky install

This command sets up Husky by creating a .husky/ directory in your project.

To ensure Husky is set up correctly, add the following script to package.json:

"scripts": {
  "prepare": "husky install"
}

Run the script to initialize Husky:

npm run prepare

Step 5: Add a Pre-Commit Hook for ESLintNow, add a pre-commit hook to ensure that ESLint runs before any commit:

npx husky add .husky/pre-commit "npx eslint ."

This will create a pre-commit file inside the .husky/ directory. Open the file and make sure it contains:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx eslint .

Now, every time you try to commit code, ESLint will check your files for errors.

Step 6: Add a Pre-Push Hook (Optional)If you also want to run ESLint before pushing code, add a pre-push hook:

npx husky add .husky/pre-push "npx eslint ."

This ensures that only linted code gets pushed to the repository.

Step 7: Test the SetupTo test your setup, create a JavaScript file with some syntax errors and try committing it:

git add .
git commit -m "Testing Husky and ESLint"

If ESLint detects any issues, the commit will be blocked, and you'll need to fix the errors before proceeding.