Prettier in VS Code, The OCD Roommate Who Makes Your Code Shine ~ Fun Programming

Imagine you're coding in JavaScript, TypeScript, or HTML, sipping coffee, with a gentle breeze and everything feeling just right... until you open a file you wrote two weeks ago.

Suddenly you think:

“Who the heck wrote this jungle? No indentation, brackets everywhere, closing tags missing… Is this code or a horror movie script?”

Then it hits you.
It was YOU.

But don’t worry. There’s one glorious savior in the Visual Studio Code universe who will make your life neater, shinier, and definitely less chaotic:
Prettier – Code Formatter.

What Is Prettier?

Prettier isn’t a skincare product, but the effect is the same: it makes things glow and easier on the eyes.

Technically speaking, Prettier is a code formatter that automatically cleans up your code. It doesn’t care about your personal opinions. It says:

"Oh, you want two spaces? I don’t think so. You prefer opening brackets on a new line? Not on my watch."

Yes, Prettier is stubborn, but its heart is in the right place. It just wants all your code to look pretty and consistent.

Why Should You Use Prettier? Is It Really Necessary?

Picture this: you're working on a team with three devs.

Person A uses 2-space indentation.
Person B uses 4.
Person C doesn’t indent at all (a true coding gremlin).

Then you merge code together. The result?
A disaster. A visual nightmare. A crime against syntax.

Prettier is like the referee of developers, enforcing one uniform style and preventing wars about tabs vs spaces or semicolons vs no semicolons.

How to Install Prettier in VS Code (Easy-Peasy)

Open Visual Studio Code.
Hit Ctrl + Shift + X to open the Extensions panel.
Search for "Prettier – Code formatter".
Click Install, and BAM! Your world gets a little prettier.

Now, to make it even better, you should:

Enable Format On Save in your VS Code settings.
Create a .prettierrc config file to set preferences.

Voilà! From now on, whenever you save a file, Prettier shows up like:

“Nice work! Let me clean this up a bit so it looks like a fresh shirt straight from the iron.”

Prettier’s Features That Will Make You Cry (with Joy)

1. Auto-Formatting on Save

Seriously. This feature will make you question your past life choices:

“Why did I spend years manually fixing indentation like some kind of peasant?”

With Prettier:

Indentation: Fixed.
Semicolons: Fixed.
Brackets: Styled.
Quotes: Consistent.

Example:

function greet(name){console.log("hello "+name)}

Becomes:

function greet(name) {
  console.log("hello " + name);
}

It’s like magic—but polite, and with better style than you.

2. Supports a TON of Languages

Prettier is multilingual and doesn’t discriminate. It understands:

JavaScript
TypeScript
HTML
CSS
JSON
Markdown
YAML
GraphQL
Vue, Angular, React, even Astro

If your code is still messy, it’s not because Prettier can’t help. Maybe... just maybe... you haven’t let it in your life yet

3. Some Custom Configurations Allowed (Not Too Much Though)

Prettier is firm with boundaries, but you can still negotiate a little via .prettierrc. For example:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100,
  "bracketSpacing": true
}

But don’t expect full freedom. Prettier believes in strong conventions for better collaboration, not endless chaos.

4. Works via CLI Too

Not a VS Code user? Prefer the command line like a true keyboard ninja? Prettier’s got you:

npx prettier --write .

That command will format all supported files in your folder. It’s like unleashing a Roomba, but for code.

Prettier’s Weak Spots (Because Nothing’s Perfect)

1. It’s Kinda Bossy

Sometimes you'll be like:

“Wait… why did it format this line like that? I liked my version better!”

And Prettier will say:

“I don’t care about your feelings. I care about world peace through consistent code.”

If you like having full control over every space and line, Prettier might drive you up the wall. But it's trying to help you become a more professional, grown-up developer (even if you’re still coding in pajamas on the bed).

2. It Might Clash With ESLint (If Not Configured Right)

Prettier and ESLint can be like two gifted kids who can’t agree on anything. One wants this, the other wants that. Every time you save, they argue.

Solution: Bring them together in harmony using:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

After that, it’s pure teamwork. Peace restored.

3. It Doesn’t Read Minds

Maybe you like to format code a certain way:

No semicolons ever.
Long lines? Who cares?

But Prettier doesn’t work like that. It uses community standards, not individual quirks. So if you want complete creative formatting freedom… Prettier says no.

Tips for a Happy Life With Prettier

Create a .prettierrc file in every project.
Enable “Format on Save” to enjoy auto-cleaning bliss.
Combine with ESLint for full protection (like shampoo + conditioner combo).
Use .prettierignore to exclude generated files or files that shouldn’t be touched.

Prettier, the Neat Freak Who Makes Life Better

If ESLint is the strict cop, Prettier is the OCD roommate who loves order and peace.

It doesn’t yell. It doesn’t warn. It just says:

“Let me clean that for you.”

Prettier brings:

Neatness
Readability
Consistency
And a subtle sense of joy

Prettier isn’t about you, it’s about us—developers working together.
Code is not just for you, but for the next person who has to read and maintain it.

My Personal Rating:

🌟🌟🌟🌟🌟 5 out of 5 spotless stars.

Without Prettier, you can survive. But once you’ve used it, you’ll never want to go back to the lawless Wild West of freestyle formatting.

If you’re already using Prettier and it brought order to your messy developer life, share your story.
If you’re not using it yet... come on. Don’t wait until your codebase looks like spaghetti with extra sauce.

Remember:
Clean code isn’t just a linter’s job—it’s an act of love.

Fun Programming