How to Set Up Husky, ESLint, and Prettier in a Node.js Project

Photo by Pakata Goh on Unsplash

In this tutorial, we will walk you through the process of setting up Husky, ESLint, and Prettier in a Node.js application. These tools will help you maintain consistent code quality, enforce coding standards, and ensure that your codebase remains clean and error-free. We’ll cover everything from installation to advanced configuration.

Prerequisites

Before we begin, make sure you have the following installed on your system:

- Node.js (with npm, the Node.js package manager) — You can download it from the official Node.js website: https://nodejs.org/

Step 1: Create a Node.js Project

If you don’t already have a Node.js project, you can create one using the following commands:

mkdir my-node-app
cd my-node-app
npm init -y

Step 2: Install Dependencies

In this step, we’ll install the necessary dependencies: ESLint, Prettier, and Husky.

npm install eslint prettier husky — save-dev

Step 3: Configure ESLint

Create an ESLint configuration file in your project’s root directory. You can create a basic `.eslintrc.json` file with the following content:

{
“extends”: [“eslint:recommended”],
“parserOptions”: {
“ecmaVersion”: 2021
},
“rules”: {
// Your custom rules here
}
}
```

Step 4: Configure Prettier

Create a Prettier configuration file in your project’s root directory. You can create a `.prettierrc.json` file with your preferred formatting options:

{
“singleQuote”: true,
“trailingComma”: “es5”,
“tabWidth”: 2
}

Step 5: Configure Husky

Husky enables us to run scripts (such as ESLint and Prettier) automatically before committing code. To set up Husky, add the following to your package.json:

{
“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”
}
},
“lint-staged”: {
“*.js”: [
“eslint — fix”,
“prettier — write”,
“git add”
]
}
}

Step 6: Create Sample Code

Create a sample JavaScript file index.js in your project’s root directory:

const greeting = “Hello, world!”;
console.log(greeting);

Step 7: Test the Setup

Now that everything is set up, let’s test it:

1. Make sure you’re in your project’s root directory.
2. Modify index.js to introduce a linting error, like removing a semicolon.
3. Try to commit the changes using `git commit -am “Test commit”`.

Husky should prevent the commit due to the linting error, and ESLint will automatically fix the issue and format the code using Prettier.

Advanced Configuration

To further customize your setup, you can:

- Extend ESLint rules in your `.eslintrc.json` file.
- Explore additional Prettier options in your `.prettierrc.json` file.
- Add more pre-commit tasks to `lint-staged` in your `package.json`.

By following this tutorial, you’ve successfully set up Husky, ESLint, and Prettier in your Node.js application. These tools will help you maintain consistent code quality and enhance the development experience for you and your team.