Whether I’m building a quick prototype or working on a large-scale frontend application, two tools are always in my toolbox: Prettier and ESLint.

In this post, I’ll break down:

• What Prettier and ESLint are
• Why using them together is powerful
• How to configure them step-by-step
• Common setup tips for React projects
• Final thoughts & GitHub-ready config

✨ What is Prettier?

Prettier is an opinionated code formatter. It takes your messy, inconsistent code and formats it nicely every time you save the file.

✅ What Prettier Does:

• Adds/removes semicolons
• Aligns indentation
• Wraps long lines
• Sorts props or attributes
• Ensures consistent spacing

You don’t have to debate code style anymore. Let Prettier decide.

🧠 What is ESLint?

ESLint is a static code analysis tool that finds problems in your JavaScript/TypeScript code.

✅ What ESLint Does:

• Catches undefined variables
• Warns about unused imports
• Flags dangerous or bad practices
• Helps you write cleaner, bug-free code

You can also extend it to follow rules from:

• Airbnb
• Standard JS
• React plugins
• TypeScript

🤝 Why Use Both Together?

• Prettier formats your code.
• ESLint finds code problems.

Using both gives you clean + correct code with minimal effort.

Without Prettier, ESLint rules like indentation, spacing, and quotes become tedious to manage. When used together:

• ESLint focuses on code quality
• Prettier focuses on code style

And yes — they can work in harmony 💪

🔧 How to Set Up Prettier + ESLint in a React Project

Here’s how I do it in all my projects.

1. Install the required packages:

npm install -D eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier

2. Create or update .eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/prop-types": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

3. Add .prettierrc config

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

4. Add .eslintignore and .prettierignore

node_modules
build
dist
public

💡 VS Code Integration (Optional but Recommended)

1. Install extensions:

   • ESLint
   • Prettier - Code formatter

2. Open Settings (Ctrl + ,) > Workspace Settings, then add this:
   

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

Now every time you hit save, Prettier will auto-format your file, and ESLint will warn you of any issues.

🧪 Common Gotchas & Fixes

🧾 Final Thoughts

Prettier + ESLint is like having a code buddy who never sleeps. They:

• Clean your code
• Catch silly mistakes
• Keep your style consistent
• Improve team collaboration

Once you try it, you’ll never want to code without it again.

📲 Follow me on or Personal Website , Instagram or WhatsApp for daily frontend tips, and share your favorite code tools in the comments!