Automating Code Formating with Prettier 🧹

How much time have you (or your team) wasted discussing:

• “2 spaces or 4?”
• “Should we use semicolons?”
• “Why is this file formatted differently?”

Let’s fix that once and for all.

Here’s a simple setup using EditorConfig + Prettier that keeps your code clean automatically.

---

Before we start, let’s clarify the difference between EditorConfig and Prettier.

Quick Clarification: EditorConfig vs Prettier

Although they work well together, they solve different problems.

EditorConfig defines basic editor rules like indentation style, indentation size, and line endings. It standardizes how your editor behaves.

Prettier formats your actual code handling semicolons, quotes, line breaks, object formatting, and more.

In short:

EditorConfig controls the editor.
Prettier controls the code style.

Using both ensures consistency across machines, editors, and the entire team.

---

1️⃣ Step One: Add EditorConfig

First, install the EditorConfig extension in your IDE.

Then create a .editorconfig file at the root of your project:

root = true

[*.{js,ts,jsx,tsx}]
indent_style = space
indent_size = 2

This ensures:

• Consistent indentation
• Standard formatting rules
• No more guessing across machines or editors

---

2️⃣ Step Two: Install Prettier

Install it as a dev dependency:

npm install prettier --save-dev

Now add these scripts to your package.json:

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

What this gives you:

✅ npm run lint:check → checks formatting
🔧 npm run lint:fix → fixes everything automatically
🌟 Tip: We can add these commands to the project pipeline later to ensure the rules are always enforced and nothing is missed.

---

3️⃣ Ignore What Shouldn’t Be Formatted (.prettierignore)

Sometimes you don’t want Prettier to format certain folders (like build outputs).

Create a .prettierignore file in the root of your project.

Example:

.next
out

This tells Prettier to ignore those directories.

In my case, I added folders that aren’t necessary for my application such as build or generated files to avoid unnecessary processing and noise.

Think of it like .gitignore, but for formatting.

---

4️⃣ Make It Fully Automatic (Best Part)

Install the Prettier extension in your IDE.

Then:

• Set Prettier as your Default Formatter
• Enable Format On Save

That’s it.

Now every time you save a file, it formats itself.

No extra commands.
No formatting discussions.
No messy diffs in PRs.

---

Example

Before saving:

const getSum = (a, b) => 
  { return a + b }

After saving:

const getSum = (a, b) => {
  return a + b;
};

Clean. Predictable. Consistent.

---

Why This Matters

Code formatting should never be a team debate.

It should be:

• Automatic
• Invisible
• Consistent

When formatting is standardized, your team can focus on what actually matters:

Building great software 🚀