How to Use Prettier and ESLint Together in VS Code for React Projects

When building React applications, writing clean and consistent code is just as important as building new features. But formatting and linting errors can quickly become frustrating—especially when working in teams or large projects.

That’s where Prettier and ESLint come in.

These two tools help you enforce best practices, catch bugs early, and maintain a professional code style across your entire React project. But to make them work perfectly together inside VS Code, you need the right setup.

This guide walks you through step-by-step how to integrate ESLint and Prettier smoothly for any modern React project.

---

🧩 What Are ESLint and Prettier?

Before we set them up, let’s break down what each tool actually does.

---

🔍 ESLint — Your Code Quality Checker

ESLint checks your JavaScript and React code for:

• Bad patterns
• Bug-prone logic
• Anti-patterns
• Undefined variables
• Incorrect React hooks usage
• Code smells
• Style issues

In short, ESLint = find problems in your code.

---

🎨 Prettier — Your Automatic Code Formatter

Prettier formats your code by:

• Fixing indentation
• Adding/removing semicolons
• Normalizing quotes
• Wrapping long lines
• Formatting JSX
• Keeping consistent styles across the project

In short, Prettier = fix code formatting automatically.

---

💡 Why Use Them Together?

Without integration:

• ESLint may complain about formatting
• Prettier may override ESLint rules
• You get conflicts
• VS Code shows unnecessary warnings

Using both together ensures:

✔ Consistent formatting
✔ No conflicting rules
✔ Auto-fixes on save
✔ Cleaner and more readable code

This setup is essential for any professional React project.

---

🚀 Step 1: Install ESLint and Prettier

Open your React project and install both packages.

Using npm

npm install -D eslint prettier

Or using yarn

yarn add -D eslint prettier

---

🚀 Step 2: Install Required Plugins

These integrations help ESLint and Prettier work smoothly.

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

What they do:

• eslint-config-prettier → Turns off ESLint rules that conflict with Prettier
• eslint-plugin-prettier → Runs Prettier as an ESLint rule

---

🚀 Step 3: Initialize ESLint

Run:

npx eslint --init

You will be asked:

• Choose JavaScript modules (ESM)
• Use React (if building React)
• Choose Browser + Node
• Format: JSON or JS
• Style guide (Airbnb recommended)
• Use TypeScript? (Choose yes/no based on project)

This creates an .eslintrc file.

---

🚀 Step 4: Update .eslintrc for Prettier Integration

Add Prettier to extends and plugins:

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

This tells ESLint:

• Use recommended rules
• Use React rules
• Let Prettier handle formatting

Now Prettier becomes part of ESLint, preventing conflicts.

---

🚀 Step 5: Create a Prettier Config

Create a file:

.prettierrc

Add your settings:

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

Prettier will now format your code based on these rules.

---

🚀 Step 6: Install VS Code Extensions

Inside VS Code, install:

1. ESLint
2. Prettier – Code Formatter

Search for them in the Extensions panel.

---

🚀 Step 7: Configure VS Code Settings

Go to:

File → Preferences → Settings → search “Format on Save”

Enable:

✔ Editor: Format on Save
✔ Editor: Default Formatter → Prettier

Next, add this to your VS Code settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Now VS Code will:

✨ Format with Prettier
✨ Fix ESLint issues
✨ Apply everything automatically on save

---

🚀 Step 8: Test Your Setup

Write messy code:

const  test=()=>{console.log("hello")}

Press Ctrl + S.

It should automatically become:

const test = () => {
  console.log('hello');
};

If this happens—you’re all set!

---

🛠️ Common Issues & How to Fix Them

❌ Error: Prettier and ESLint fighting each other

Fix: Ensure "plugin:prettier/recommended" is in .eslintrc.

---

❌ VS Code not formatting on save

Fix: Enable:

"editor.formatOnSave": true

---

❌ Prettier not triggering

Fix:

"editor.defaultFormatter": "esbenp.prettier-vscode"

---

❌ ESLint errors not fixing automatically

Fix:

"editor.codeActionsOnSave": { "source.fixAll.eslint": true }

---

🎯 Why This Setup Is Essential for React Developers

Using ESLint + Prettier together gives you:

✔ Cleaner code

Formatting becomes consistent across all files.

✔ Fewer bugs

ESLint catches mistakes early.

✔ Better collaboration

Your team follows one formatting standard.

✔ Faster development

Auto-fixes save hours of manual cleanup.

✔ More professional projects

Clients trust developers who prioritize quality.

---

🔮 Bonus: Prettier + ESLint in Create React App and Next.js

Most modern frameworks already include ESLint.
You only need to add Prettier:

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

Then update the config files as shown earlier.

Works perfectly for:

• Create React App
• Vite React projects
• Next.js
• Remix
• Gatsby

---

Conclusion

Setting up Prettier and ESLint together in VS Code is one of the smartest moves you can make as a React developer in 2025.

It gives you:

• Clean code
• Automated formatting
• Fewer bugs
• Faster workflow
• A professional development environment

Whether you’re building small apps or scaling large enterprise systems, this setup is the foundation of a modern React development workflow.