What to Expect from This Article

If you’ve ever wondered what ESLint and Prettier are or why they’re buzzing in the JavaScript world, you’re in the right place! In this quick read, we’ll break down these tools in simple terms. You’ll discover:

What ESLint and Prettier actually do (spoiler: they’re code superheroes!).
Why you need them in your Node.js or JavaScript projects
How to add them in your CI pipeline.

What Are ESLint and Prettier?

The first question that pops into our minds is: What are ESLint and Prettier, and why do we even need them in the first place?

Think of Prettier as your code’s personal auto-beautician. You can write your code however you like—messy indents, inconsistent spacing, or even forgetting semicolons—but Prettier swoops in to clean it all up. It fixes the spacing, adds or removes semicolons, and ensures everything looks consistent.
On the other hand, ESLint is like a spell-checker for your JavaScript. It dives into your code, catches mistakes or risky patterns—like typos, unused variables, or bad syntax

Why We Need Them?

Every developer has their own coding style - some prefer double quotes, others stick to single quotes; some skip semicolons at the end of lines, while others always include them. As your team grows and more people join with their unique approaches, things can get messy. Codebases become inconsistent, hard to read, and prone to errors like typos or risky patterns slipping through.

This is where ESLint and Prettier come in. They ensure your code looks uniform across the team, no matter who’s writing it, making it easier to read and maintain. ESLint catches mistakes and potential bugs early—like unused variables or bad syntax—while Prettier automates formatting to keep everything clean and consistent. Together, they save time, reduce headaches, and help you deliver high-quality code without the guesswork.

Let’s Get Started: Setting Up ESLint and Prettier

Let’s start with first setting up a node backend project

 // Create a New Project Folder
 mkdir project
 // Navigate to project directory
 cd project
 // Initialize a Node.js Project
 npm init -y
 //Install Express
 npm install express

Now you’ve got a basic Node.js project ready to go! Create a server.js file in your project folder with this code:

 const express = require('express');
 const app = express();
 const port = 3000;

 app.get('/', (req, res) => {
   res.send('Hello, World!');
 });

 app.listen(port, () => {
   console.log(`Server running on port ${port}`);
 });

Install ESLint and Prettier as development dependencies.
```
 npm install --save-dev eslint prettier
```
Run the Initialization Command
```
 npx eslint --init
```

This will launch an interactive setup wizard where you can configure ESLint based on your project requirements


 > cd@1.0.0 npx
 > create-config

 @eslint/create-config: v1.5.0

 ? How would you like to use ESLint? ...
   To check syntax only
 √ How would you like to use ESLint? · problems
 √ What type of modules does your project use? · commonjs
 √ Which framework does your project use? · none
 √ Does your project use TypeScript? · javascript
 √ Where does your code run? · browser
 The config that you've selected requires the following dependencies:

 eslint, globals, @eslint/js
 √ Would you like to install them now? · No / Yes
 √ Which package manager do you want to use? · npm
 ☕️Installing...

 added 1 package, changed 1 package, and audited 161 packages in 1s

 38 packages are looking for funding
   run `npm fund` for details

 found 0 vulnerabilities

After this we need to create a .prettierrc file where we can declare the prettier config

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

Next, add the following scripts to your package.json file. These will allow you to easily run ESLint and Prettier commands:

 "lint": "eslint .",               // Runs ESLint to check for code issues in all files
 "lint:fix": "eslint . --fix",     // Runs ESLint and automatically fixes fixable issues
 "format": "prettier --write .",   // Formats all files using Prettier
 "format:check": "prettier --check ." // Checks if files are formatted correctly without modifying the

That's it! We've successfully set up ESLint and Prettier in our Node.js project.

Setting Up Husky

Now that ESLint and Prettier are set up, let's integrate Husky to enforce these checks before committing code. This ensures that only clean, formatted code gets committed.

Then, proceed with the installation steps for Husky and setting up pre-commit hooks. 🚀

Install the Husky package
```
 npm install husky --save-dev
```
Initialized the Husky with below command and this will create a .husky folder in your project
```
 npx husky init
```

We can either manually enter the commands that we want to run when we commit by going to the .husky/pre-commit file

 echo '#!/bin/sh' > .husky/pre-commit
 echo '. "$(dirname "$0")/_/husky.sh"' >> .husky/pre-commit
 echo 'npm run lint && npm run format' >> .husky/pre-commit

Try by yourself

 git add .
 git commit -m "test/lint and prettier setup"

We’ve also successfully set up Husky! Now, whenever you commit your code, it will automatically run the linting and formatting commands. This ensures your code stays clean and error-free right from the start, catching issues early and keeping everything polished!

Adding Lint and Prettier Checks to Your GitHub Workflow

One question that comes to our mind that Husky already runs lint and format when you commit locally, so why add them to a GitHub Workflow?

It’s a backup plan. Sometimes people skip hooks with --no-verify, or a teammate might not have Husky set up right. Plus, workflows ensure everyone’s code gets checked the same way, no matter their setup. Benefits? It catches slip-ups, keeps quality consistent, and ties into PRs or CI/CD for extra peace of mind. Think of it as a safety net—Husky’s your first check, and the workflow’s the final one!

Now how to create workflow for lint and prettier check

Create a Workflow File
Add a file like .github/workflows/lint-and-format.yml in your repo.

Add This YAML Structure

 name: Lint and Prettier Checks
 run-name: ${{ github.actor }} runs lint & format 🚀
 on: [push, pull_request] 

 jobs:
   lint-and-format:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

       - name: Install dependencies
         run: npm ci

       - name: Run ESLint
         run: npm run lint

       - name: Run Prettier check
         run: npm run format:check

Commit and push the file to your repo. Head to the “Actions” tab in GitHub, and you’ll see your workflow running

Outro

That’s it! Your code’s now polished and protected with ESLint, Prettier, Husky, and GitHub Workflows. Go build something awesome—happy coding!

How to Setup ESLint and Prettier in Your Node.js Project and In CI Pipeline ?

Table of contents