코드 스타일에 대한 논쟁 중지 — 더 예쁜 ESLint 및 Husky 한 번 설정

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

• https://prettier.io/
• https://eslint.org/
• https://typicode.github.io/husky/
• https://github.com/okonet/lint-staged

🧩 Final thought

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

Set it once. Forget it forever.