Improving Developer Experience with ESLint + Prettier

Ever opened your project and noticed inconsistent spacing, missing semicolons, or code that just looks off?
That’s where ESLint and Prettier come in — the dynamic duo that makes your code cleaner, more consistent, and easier to maintain.

In this post, you’ll learn how to set up ESLint + Prettier for your project and make your developer experience smoother than ever.

---

🧠 What Are ESLint and Prettier?

• ESLint — a tool that analyzes your JavaScript/TypeScript code and helps you find and fix problems (like unused variables, missing imports, or unsafe code).
• Prettier — an opinionated code formatter that ensures your code looks consistent across your team (same quotes, spacing, etc.).

Together, they:
✅ Catch bugs early
✅ Keep code style consistent
✅ Save time spent on code reviews arguing about formatting

---

⚙️ Step 1: Install ESLint and Prettier

If you’re using npm:

npm install --save-dev eslint prettier

Or with yarn:

yarn add -D eslint prettier

---

🧩 Step 2: Initialize ESLint

Run this command to create a default ESLint configuration:

npx eslint --init

You’ll be asked a few questions — for example:

• How would you like to use ESLint? → “To check syntax, find problems, and enforce code style”
• What type of modules does your project use? (CommonJS / ES Modules)
• Does your project use TypeScript? (yes/no)
• Which framework are you using? (React, Vue, None)
• Where does your code run? (Browser / Node)
• Which format do you want your config file in? (JSON, YAML, or JavaScript)

This will generate an .eslintrc.json file in your project root.

---

🎨 Step 3: Configure Prettier

Create a .prettierrc file to define your formatting preferences:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

You can adjust these based on your coding style or team conventions.

---

🔧 Step 4: Integrate ESLint with Prettier

By default, ESLint and Prettier can sometimes conflict (e.g., ESLint wants double quotes, Prettier wants single).
To fix that, install some helper plugins:

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

Then update your .eslintrc.json like this:

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

This setup tells ESLint to:

• Use Prettier for formatting rules
• Show Prettier issues directly in ESLint errors

---

🧠 Step 5: Add Scripts for Convenience

In your package.json, add shortcuts for linting and formatting:

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "format": "prettier --write ."
}

Now you can run:

npm run lint
npm run lint:fix
npm run format

---

🧩 Step 6: Enable Auto-Fix on Save (VS Code)

For the best experience, enable auto-formatting in VS Code:

1. Open Settings (Ctrl + ,)
2. Search for Format On Save and enable it
3. Set the default formatter to Prettier - Code Formatter

Optionally, create a workspace file .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Now your code will auto-fix and format every time you save 😎

---

🚀 Step 7: (Optional) Add Husky for Pre-Commit Linting

Want to ensure bad code never makes it into your repo?
Add a Git hook that runs ESLint before every commit.

npx husky-init && npm install

Then edit .husky/pre-commit:

npm run lint:fix

Now, every commit automatically checks and formats your code before it’s saved in Git.

---

✅ Final Thoughts

Setting up ESLint and Prettier might seem like extra work at first —
but it’s a massive time-saver in the long run.

You’ll:

• Spend less time fixing formatting issues
• Catch bugs early
• Keep your project consistent across your whole team

Once you try it, you’ll wonder how you ever coded without it ✨

---