DEV Community

Gerald Hamilton Wicks
Gerald Hamilton Wicks

Posted on • Edited on

Automate Code Formating with Prettier 🧹

#javascript #prettier #node

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.

Quick Clarification: EditorConfig vs Prettier

Before we start, let’s clarify the difference between EditorConfig and 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Now add these scripts to your package.json:

"scripts": {
  "lint:check": "prettier --check .",
  "lint:fix": "prettier --write ."
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Install the Prettier extension in your IDE. Then:

  1. Set Prettier as your Default Formatter
  2. 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 }
Enter fullscreen mode Exit fullscreen mode

After saving:

const getSum = (a, b) => {
  return a + b;
};
Enter fullscreen mode Exit fullscreen mode

Clean. Predictable. Consistent.

Why This Matters

When formatting is standardized, your team can focus on what actually matters: Building great software 🚀

Top comments (3)

Collapse
 
gesslar profile image
gesslar •

Even if I fundamentally disagree with any implementation using Prettier, I do think you did a good job of presenting your case (in the opening).

It would also be wonderful to see what your own voice would look like in presenting the article after the opening. :)

Collapse
 
geraldhamiltonwicks profile image
Gerald Hamilton Wicks • • Edited

thanks for the feedback ! I would like to understand more, why you disagree in using prettier, and if you use other tool instead ?

Collapse
 
gesslar profile image
gesslar •

I use my own. @gesslar/uglier :)

uglier.gesslar.io/