How to add ESLint, Prettier, and Husky to your Web / NodeJS project
Tags: webdev, javascript, beginners, react
Published: 2022-11-20 12:52:07

Every web developer that writes in NodeJS/React/NextJS/Angular/Vite should use [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), and [Husky](https://typicode.github.io/husky/#/). You must be familiar already with ESLint and maybe you have heard about the other two before but if not, I'm going to do some order in your head about each one and how you can use it and implement it in your own project. So let's get started.

## Adding ESLint
![A logo of eslint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcoxh39d2yxuzadark6i.jpeg)

[ESLint](https://eslint.org/) is a straightforward linting tool that helps identify problematic patterns in your code before you build your code and also on the way while you're coding.

As a developer, one of my goals is to write better code with minimal errors to save time on debugging and failed builds. One way to get better with code syntax and get better coding is using **ESLint**. You can find problems quickly, fix problems automatically and you can configure it for yourself for how you like the code to be.

One quick way to add **ESLint** to your project is simply running the following line in your terminal:

```bash
npx eslint --init
```

After running this command you'd be asked a couple of questions and when it's done it'll install for you all the packages you need automatically and generate a `.eslintrc.json` file in your root folder.

You can add plugins to your **ESLint** config file and you can change the rules to how you like to write your code.

## Adding Prettier

![A prettier logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c28fvmhzecxhz9abegvc.jpg)


[Prettier](https://prettier.io/) is a code formatter. When you add **Prettier** to your code you can integrate it with your editor and while you're saving the code will automatically format itself to your preferences.

It saves time in teams because it enforces the same code style and does it automatically so you don't have to argue each time in a code review that you forgot a semicolon at the end of a line.

In order to add Prettier to your project you need to install it via `npm`:

```bash
npm install --save-dev --save-exact prettier
```

After you add it to your project you can go into your editor's settings and change it to run **Prettier** so it can format your code each time you're saving a file. Also, you can add it to format your project each time you run a build or something like that.

You can use this line to format your code:

```bash
npx prettier --write .
```

## Adding Husky

![A Husky logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/it0cwc1r7ctkkqyfkn9k.png)


I guess if you come so far and you know more than coding, then you know about git. [Husky](https://typicode.github.io/husky/#/) is a tool that makes it easier to write git hooks and helps with your code flow.

For example, you can create a commit git hook that each time you do the command git commit then it will run tests, lint your code, lint your commit messages, and more! So let's see how we do that:

First, let's add **Husky** to our project:

```bash
npm install husky --save-dev
```

Second, enable git hooks:

```bash
npx husky install
```

Now you can create your first hook! Let's create a pre-commit hook:

```bash
npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit
```

After you run these commands you'll see a folder with the name `.husky` being created at the root of your project folder and it's the same `pre-commit` hook that we have created. You can now run `git commit` to see how it's working 😄

---

I really recommend to you use these three tools and you'll see how much your workflow will be improved and also see how you will write better code.

I hope you find this article useful and that you learn something new that you didn't know before. I'm more than happy to reply to any questions that you have on your mind :)