Prettier: The World's Most Stubborn Code Formatter

What is Prettier?

Prettier is an opinionated code formatter that enforces a specific code style across the project. It removes all original styling of supported languages and ensures that the code conforms to a consistent style. It simply takes your code and reprints it from scratch by taking its rules into account. Like for example max_line_length in here:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
);

It's crucial to note that it's a formatter, not a linter. If you're unfamiliar with the distinction, I recommend watching my first video on this topic here.

How to install Prettier?

To install Prettier within your codebase, just simply navigate to the project root in the terminal and install it using the following command.

yarn add --dev --exact prettier

How to use Prettier?

To search for rule violations, you can use the  prettier command and specify a directory to check. It will scan files and list any issues. Unfortunately, it doesn't show exact issues with references to problematic lines as it happens in other similar tools.

yarn prettier . --check

Checking formatting...
[warn] .stylelintrc
[warn] changelog.md
[warn] composer.json
[warn] style.css
[warn] Code style issues found in 4 files. Run Prettier to fix.

To fix the issues automatically, you can run the same command, but with the --write argument. As a result, you'll get information about which file has been changed so you can verify some files to check that it works fine.

yarn prettier . --write

.prettierrc 23ms (unchanged)
.stylelintrc 5ms
changelog.md 19ms
composer.json 2ms
package.json 1ms (unchanged)
style.css 8ms

We can also add new tasks in package.json to make this process easier. Now, you can run yarn lint and yarn format commands to run Prettier tasks.

{
  "scripts": {
    "build": "vite build",
    "dev": "vite",
    "lint": "prettier . --check",
    "format": "prettier . --write"
  },
}

You can use Prettier manually as described here, but it has been created to forget about manual fixes! That's why you can integrate git hooks with tools like Husky, but I'll handle this in another video together with other formatters and linters like phpcs.

How to configure Prettier?

I wanted to discuss Prettier's rules now and show how you can modify them, but I'm not sure if it's needed. According to the core idea of Prettier - being opinionated - you should not need this because you should rely on the rules defined by Prettier. If you decide to use it, you must accept its rules.

It's a little bit different approach than for example in phpcs, where you can define which rules you want to use in your project and the tool verifies them. Here, Prettier tells how to format the code and if you decide to use it, you need to trust it. The official articles describe the choice well, so you should check it out!

Of course, it provides a limited set of options so you can create the configuration file, and modify rules, like using a single quote instead of double ones, but most of them are there only due to "history" reasons and no more will be added in the future.

{
  "singleQuote": true
}

Note that Prettier supports EditorConfig, which is a great addition! For example, if you've set indent_size there already, this configuration will be reflected in Prettier too.

How to use Prettier in VS Code?

If you want to use it now without worrying about running commands in your terminal manually, you can integrate it with your VS Code (and not only) editor.

Just install the plugin and use it when needed. You can configure it to format the code on save, or just run the command manually which is a way preferable to me. I don't like it when something changes the code without my permission so I do this manually 😅

How to ignore code in Prettier?

As with all tools like this, you can ignore code checks by creating a .prettierignore file, which has a similar format as .gitignore and ignores files and directories defined there. You can also ignore specific lines with comments that differ based on the language.

dist
*.lock
*-lock.json

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

/* prettier-ignore */
.my    ugly rule
{

}

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

In this example, we want to skip the dist directory, which is the output directory for my front-end assets and lock files from package managers.

Do I use Prettier?

I was wondering a lot - Why do the docs highlight the opinionating aspect of Prettier so often? Now, after using it for a while I understand why 😅

Prettier has a specific way of formatting code without offering much customization. It follows a specific set of rules and doesn't allow much deviation from them, ensuring a consistent code style across a project. That's why it's opinionated.

Its greatest advantage, like this, might be also treated as disadvantage. In some aspects, Prettier follows the code too strictly, making problems instead of solving them. Antony Fu, in his article, already pointed out why it might be treated as a problem. I insist you check out the whole article because it's a great reference for the decisions about usage.

I like the opinion provided there which states that Prettier is not for everyone. And it seems to be not for me. I don't like not having control over things like this, and I expect more flexibility in rules management. It also generates some problems in my workflow when using other linters like Stylelint or ES Lint, but I'll discuss this topic wider in the separate materials about those linters, so remember to stay up to date 🥰

So do I use it? For now, I'll leave Prettier in my project to let it format other than JS and SCSS file types and check how it handles this task. I won't be using it for SCSS and JS formatting, at least for now because I prefer more flexible Stylelint and ES Lint which are the linters, but handle formatting well too. Maybe I'll get back to Prettier? We'll see

Should you use Prettier?

I'm just one simple developer, so you don't need to blindly follow me! You're the chief here so install the Prettier and check on your own how it improves the workflow. I believe that for projects that don't need JS or CSS linting that's the perfect tool.

And of course, let me know in the comments what are your thoughts. Are you on the hype train or have doubts like me? I'll be glad to hear this!