Make Prettier Work in VSCode with This One Weird Trick.

Hi, yeah, it’s me!

Can I admit something embarassing? I’m going to anyway, so I shouldn’t have asked. If you don’t like it you don’t have to keep reading!

I frequently install Prettier, see it doesn’t work, and simply give up, leaving the extension lying there like a slab of racoon meat on the side of the road.

You don’t have to be like me, though! I will fix you today. Thanks for coming by.

A little story:

The other week I jumped straight into the deep end and wiped Windows in favor of an immutable Linux distro on my primary personal PC. I didn’t even experiment with the Live View option, I am hardcore (and stupid). As part of this, I had to figure out how to use containers to run VS Code and push some test code up to GitHub to see if I configured things properly.

Anyway, as I was installing my usual VS Code extensions, I saw Prettier and felt my usual pang of fear. Prettier worked like a dream at the last company I pushed code full-time for, but since then, despite continuing to install it on every computer I own, it doesn’t actually work. “This time it will be different!” It never is.

But this time, it was! I had an extra few minutes. I wasn’t going to quit until I figured it out once and for all.

And I did! It turns out the creators of the Prettier app include instructions and to make the extension work you just have to follow them and it magically works.

Here is a link to the extension. Follow the instructions and you’re good to go! https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

In case you’re still scared, I’ll walk you through it:

1. Install Prettier in your project. If you’re using the VS Code extension you’re probably fine!
2. In VS Code, use CMD + SHIFT + V (Ctrl + Shift + P on Windows) to open up the command palette. Look for “Preferences: Open User Settings (JSON)”
3. Depending on how crusty and old your configuration is, you might have a lot here or absolutely nothing. What you want to make sure you get in there though is this:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

4. Then you just need to turn on “Format on Save” so Prettier runs when you save your file. You can add ""editor.formatOnSave”: true” to your JSON settings like this:

"editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true

OR, you can do it through the UI. Open the command palette back up with the aforementioned shortcut. Look for “Preferences: Open Settings (UI)“. Type “Format on save”, make sure it’s toggled on, save your files, and reach Nirvana as your disgusting codebase becomes organized and consistent.

There’s lots of other stuff you can do to customize it but honestly I just like the stock settings and have never looked into that.

Have a great day!