Mike Bifulco

Prettier.js is a fantastic way to systemize and automate your project's code style.

Embracing Prettier

Prettier.js is a fantastic way to systemize and automate your project's code style.

Prettier is "an opinionated code formatter", built to fit into your developer workflow. It's been out in the world for quite a while now, but until today, I had never successfully used it in any project I worked on. In truth, there's a few reasons for this:

  1. I was really used to (and really happy with) using eslint-config-airbnb for all of my projects. Across the board, I'd configured every node/react/js-based project to use the same airbnb config, and had a functional workflow for ensuring code quality at some level through those lint checks.
  2. I was too busy to switch. This is a bit of a bullshit answer, since one of prettier's biggest advertised features is its lightweight setup. That's not to mention the amount of time that prettier should save me once in use. A bad excuse.
  3. I could never get it to work(!) So - despite being adept at reading through docs, every single time I started down the path of setting up prettier on a project, I couldn't get it to work. Despite my peers shouting from the rooftops about how deliciously sublime prettier makes the development workflow, it seemed like a permanent impasse.

So what was the problem, then?

Well, it all came down to a formatting issue. The header image for this article tells the story: every time I installed prettier, when I triggered formatting with Visual Studio Code's formatOnSave setting, my React/jsx components would get scrambled. After some squinting, it appears that something was telling my IDE to treat these jsx files as pure Javascript, where < means "less than", and shouldn't ever be treated as the start of a component <tag>.

The Fix

In my case, it came down to a conflicting extension for Visual Studio Code. It turns out that the beautify plugin takes precedence over Prettier in its default configuration. After some plucking around, I determined that if I disable Beautify in the workspace where I'm using prettier, everything just suddenly... works. 😍

VS Code's extension interface showing the Beautify plugin, with an arrow pointing to the option that says 'Disable (workspace)'
Disable beautify in your project workspace, and everything gets better

In my case, that was it! Prettier is now working as advertised.

The jury's still out on whether prettier is life-changing for me, but it's working, at the very least. My next step was to jump into .prettierrc, and override just a few settings:

"trailingComma": "es5",
"semi": false,
"singleQuote": true,
"jsxSingleQuote": false,
"tabWidth": 2

(note: this is my first time writing JavaScript without semicolons. I'm really breaking the rules now!)

Mike Bifulco headshot

Get content for developers, designers, and entrepreneurs

Subscribe to get my updates delivered to your inbox. Typically 1-2 emails a month, straight from me to you. 😘 Unsubscribe anytime.

More great resources

Articles for developersArticles for JavaScript developersArticles about CSSArticles about User Experience (UX)Articles about tools I useArticles about productivityArticles about Gatsby
© 2019-2021 Mike Bifulco
Built with Next. Source code on GitHub.
Disclaimer: 👋🏽 Hi there. I work as a Developer Advocate at Google. Content on this site contains my own opinions, and does not necessarily reflect the views of my employer.