Prefer the YouTube version?

I was chatting to a fellow front-end dev the other day as we were pair-programming and I watched him manually indenting code like some kind of primitive front-end beast from 2006.

I asked him, ‘has your Prettier stopped working?’ and he had no idea what I was talking about. Kids these days, eh?

On the off-chance you also, somehow, missed the memo, stop what you are doing right now. This is one of the few tools that will genuinely change the way you work.

Let’s get Prettier installed and wired up in Sublime Text so I can show you what it can do. There’s plugins for every editor, I just happen to be using Sublime.

Prettier for front-end languages

What you need to know if you are at all dubious is that if you code for a living, and you aren’t using a tool to automatically format your code, you are wasting a lot of time. Some languages have their own tools to do this. For front-end languages there is Prettier.

As Prettier runs via Node, we need to install the Prettier package via NPM so its available on our system. Then we will install a plugin for our editor, in this case Sublime, to let us use it directly in the editor.

Yes, you’ll need Node installed

Do you have Node and NPM installed? You can check by opening Terminal and running node -v If you get a ‘command not found message’ you’ll want to head over to nodejs.org, download Node and do the clicky-clicky install.

With Node and NPM installed we can follow the instructions at prettier.io to install the tool on our system.

Install a plugin for the editor

Now we just need to install the Sublime package to facilitate it in Sublime. We’ll do that through package control. CMD+Shift+P and then search for JsPrettier.

That package installs the wrapper package for using Prettier directly in Sublime. Now I had a slight rigmarole getting it running on a fresh system as I had used NVM (Node Version Manager) to install my Node — which in turn meant I needed to tell the package explicitly where my Node and Prettier were. Long story short, if you run NVM you will need something like this in your JsPrettier user settings:

{
    "auto_format_on_save": true,
    "prettier_cli_path": "/Users/benfrain/.nvm/versions/node/v15.8.0/bin/prettier",
    "node_path": "/Users/benfrain/.nvm/versions/node/v15.8.0/bin/node"
}

I want to set it to run on file save, rather than running a separate command so I also set that to true there too.

Watch Prettier do its thing

Now go and mess up a CSS, HTML or JavaScript file and hit save — what did I tell you? Did that put a smile on your face or what?!

Developers have spent countless hours debating whether there should be spaces inside parenthesis, commas at the end of each piece of object notation and on and on. This takes all the debate out of it and you never have to manually format something again.

If you insist on tweaking the defaults

At first you may not agree with how it formats but get used to it. If you are adamant you want to make some changes to the default behaviour you can tweak things to a degree with a configuration file. I opt for a .prettierrc file in my user root with something like this:

{
    tabWidth: 4,
}

Then when I save I should see 4 spaces for tabs instead of 2.

Summary

And that’s all there is to it. Install it, do a tiny bit of config, and then you’ll grin every time you save a file and the computer does the donkey work for you.

I’ve been using Prettier for about four years now and it’s been a game changer. If you haven’t tried it yet, I can’t wait to hear how you like it.

If this post was useful, Say thanks with a coffee. Every donation helps keep me going!