Formatting code by hand is a waste of time—and a common source of team disagreements. That’s where Prettier comes in: a powerful, opinionated code formatter that takes care of styling so you can focus on logic.

In this post, we’ll explain what Prettier is, how it works, and why it's a must-have in any modern JavaScript (or TypeScript) codebase.

🎯 What is prettier?

Prettier is an open-source code formatter that supports many languages—JavaScript, TypeScript, HTML, CSS, JSON, Markdown, YAML, and more.

It parses your code into an abstract syntax tree (AST) and then prints it out again using consistent formatting rules.

That means no more worrying about:

  • Tabs vs spaces
  • Where to put semicolons
  • How to break long lines
  • Quote style (' vs ")
  • Indentation of nested structures

Prettier enforces a consistent style across your whole project—automatically.

⚙️ How it works

Prettier works as a write-only formatter: it doesn’t preserve original formatting—it rewrites everything based on its rules.

For example, given this messy code:

function sum ( a , b ){return a + b}

Prettier formats it as:

function sum(a, b) {
  return a + b
}

And it does this automatically on save (if integrated with your editor or pre-commit hooks).

🛠️ Installing prettier

Install it as a dev dependency:

npm install --save-dev prettier

Create a basic config file:

// .prettierrc
{
  "singleQuote": true,
  "semi": false}

Add a format script:

// package.json
"scripts": {
  "format": "prettier --write ."
}

Run it:

npm run format

🧩 Editor integration

Prettier works great with editors like VS Code, WebStorm, Sublime, and others.

To format on save in VS Code:

  1. Install the Prettier extension
  2. Add this to your settings:
"editor.formatOnSave": true,
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Now your code formats itself every time you hit Save. ✨

🔒 Pre-commit with prettier

You can use tools like lint-staged and husky to run Prettier before each commit:

npm install --save-dev lint-staged husky
// package.json
"lint-staged": {
  "**/*.js": "prettier --write"
}

This ensures that only formatted code ever makes it into your repository.

✅ Summary checklist

  • ✅ Prettier auto-formats your code to a consistent style
  • ✅ Supports JavaScript, HTML, CSS, Markdown, JSON, and more
  • ✅ Integrates with editors and Git hooks
  • ✅ Works well with ESLint (when configured correctly)
  • ✅ Helps teams avoid style debates and focus on code logic

🧠 Conclusion

Prettier is a must-have tool for any modern frontend or fullstack project. It eliminates formatting debates, reduces noise in diffs, and helps you and your team write cleaner code, faster.

Whether you're working solo or on a large team, letting Prettier handle your formatting is one of the simplest productivity upgrades you can make.