A Practical Guide to Prettier

If you've spent any time working with JavaScript, you know how quickly formatting differences can spiral out of control. One person uses double quotes, someone else prefers single; some files end in semicolons, others don’t; indentation seems to shift with the wind. Before long, you’re spending more time on formatting debates than on actual development.

This is where Prettier comes in—and it’s a game changer.

Prettier is an opinionated code formatter that takes the burden of formatting off your plate. It parses your JavaScript and rewrites it with consistent style rules—rules that are enforced uniformly across every file.

It doesn’t ask for your opinion; it just gets the job done. At first, that can feel restrictive. But the longer you use it, the more you appreciate that consistency.

Prettier doesn’t just clean up your code; it reduces friction in your workflow and in your team.

Let’s walk through how you can get Prettier up and running in a JavaScript project.

First, make sure you have Node.js installed. Once that’s ready, open your terminal, navigate to your project folder, and run:

npm init -y

This initializes a package.json file if you don’t already have one. Then, install Prettier as a development dependency:

npm install --save-dev prettier

Once that’s done, you can run Prettier directly from the command line using:

npx prettier .

This will format all compatible files in your current directory. But usually, you'll want to configure it to suit your preferences a bit. While Prettier doesn’t allow deep customization (by design), it does let you tweak a few options like line width, tabs vs. spaces, and quote style.

Create a configuration file in your project root. You can use .prettierrc, and inside that file, add something like this:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

This tells Prettier to use semicolons, single quotes, 2-space tabs, and trailing commas where valid in ES5.

You can also create a .prettierignore file—similar to .gitignore—to exclude certain files or folders from formatting. For example:

node_modules
dist
build

Now, for a smoother experience, especially during development, it’s worth integrating Prettier with your code editor. If you’re using Visual Studio Code, search for the "Prettier – Code formatter" extension in the Extensions tab and install it. Once installed, open your VS Code settings and enable “Format on Save.” This way, every time you save a file, Prettier will auto-format it in the background.

Next, consider adding a formatting script to your package.json so anyone working on your project can quickly run Prettier:

"scripts": {
  "format": "prettier --write ."
}

Now, you can run npm run format to format the entire codebase. This is especially helpful before committing changes or merging branches.

If you’re working on a team or planning to contribute to open source, you can go a step further by integrating Prettier into your version control process. Tools like Husky and lint-staged let you run Prettier on staged files before every commit. That way, no code enters the repository without being cleaned up first.

To do this, first install Husky and lint-staged:

npm install --save-dev husky lint-staged

Then, add the following to your package.json:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.js": ["prettier --write"]
}

This setup will automatically format JavaScript files when you commit them, helping you and your team maintain a clean, consistent codebase with very little overhead.

Once Prettier is part of your project, using it becomes second nature. You stop worrying about indentation or bracket placement and just write code. Prettier handles the polish.

It’s easy to underestimate how much mental clutter formatting decisions create until it’s gone. Prettier clears that clutter. And not just for individuals—it simplifies collaboration, speeds up code reviews, and helps onboard new developers faster. Instead of guessing how code should look, everyone follows the same rules, enforced by the same tool, automatically.

Yes, Prettier is opinionated. And sure, it might clash with your preferences now and then. But what it gives you in return—consistency, clarity, and peace of mind—is more than worth it.

Most developers who try it end up sticking with it, not because they lose control, but because they gain focus.

So if you haven’t tried Prettier yet, now’s a perfect time. Add it to a small project.

Let it reformat your scripts. Watch how it cleans things up. It won’t take long before you start wondering how you ever coded without it.