DEV Community

Cover image for Stop Arguing About Code Style — Set Up Prettier, ESLint & Husky Once
Hosein Mahmoudi
Hosein Mahmoudi

Posted on

Stop Arguing About Code Style — Set Up Prettier, ESLint & Husky Once

#javascript #productivity #tooling #webdev

Why this matters

I’ve worked on a few frontend projects where code reviews turned into style debates—tabs vs spaces, semicolons, quote styles… you name it.

It slows everything down and adds zero value.

At some point, I realized this shouldn’t even be a discussion.

So now, whenever I start a project, I set up Prettier + ESLint + Husky on day one.
No debates. No manual fixes. No messy PRs.

This post is exactly how I do it.

🧰 What each tool actually does

  • Prettier → formats your code automatically
  • ESLint → catches bad patterns & enforces rules
  • Husky → runs checks before commits (so no one skips them)

Together → clean, consistent code without thinking

⚙️ Step 1 — Install dependencies 

npm install -D prettier eslint husky lint-staged
Enter fullscreen mode Exit fullscreen mode

🎯 Step 2 — Setup Prettier

Create:

prettier.config.js

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  tabWidth: 2,
};
Enter fullscreen mode Exit fullscreen mode

Create:

.prettierignore

node_modules
dist
build
Enter fullscreen mode Exit fullscreen mode

🔍 Step 3 — Setup ESLint

Initialize:

npx eslint --init
Enter fullscreen mode Exit fullscreen mode

Then tweak your config:

.eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'prettier'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/react-in-jsx-scope': 'off',
  },
};
Enter fullscreen mode Exit fullscreen mode

👉 Important: "prettier" disables ESLint rules that conflict with Prettier.

🔗 Step 4 — Connect ESLint + Prettier

Install:

npm install -D eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

That’s it.
Now ESLint won’t fight Prettier.

🐶 Step 5 — Setup Husky

Initialize Husky:

npx husky init
Enter fullscreen mode Exit fullscreen mode

Add pre-commit hook:

npx husky add .husky/pre-commit "npx lint-staged"
Enter fullscreen mode Exit fullscreen mode

🚀 Step 6 — Setup lint-staged

Add to package.json:

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}
Enter fullscreen mode Exit fullscreen mode

💡 What happens now?

Every time you commit:

  • ESLint checks your code
  • Prettier formats it
  • Only clean code gets committed

No more:

  • “fix formatting” PR comments
  • broken lint rules in main branch
  • inconsistent code styles

🧠 Real impact (from experience)

After adding this to a team project:

  • PR noise dropped a lot
  • reviews focused on logic, not style
  • onboarding new devs got easier
  • nobody thinks about formatting anymore

🔗 Useful links

🧩 Final thought

If you're not setting this up at the start, you’re just postponing the pain.

Set it once. Forget it forever.

Top comments (3)

Collapse
 
frank_signorini profile image
Frank •

How do you handle conflicts between Prettier and ESLint rules in this setup? I'd love to swap ideas on this.

Collapse
 
hoseinmdev profile image
Hosein Mahmoudi •

Hi Dear Frank
Good question — this is exactly where things usually get messy if not handled properly.

What I usually do is let Prettier handle all formatting and keep ESLint focused on code quality.

To avoid conflicts, I use eslint-config-prettier, which basically turns off ESLint rules that clash with Prettier. That way they don’t fight each other.

So the flow becomes:

  • Prettier → formatting (spaces, quotes, line breaks)
  • ESLint → logic & best practices

I’ve found this separation keeps things simple and avoids weird edge cases during commits.