John Polacek

Chicago Web Developer

Engineering manager and frontend lead at Howl

My product recommendations at shop.howl.me

Shipping open source on Github

Follow me at @johnpolacek

Use Prettier and Stop Worrying About Code Formatting

Originally published on 8/29/2020

I used to be a 4-space tabber. I remember caring enough to use my text editor to convert 2-space to code to 4-space whenever I ran across it. Then I started using Prettier.

Now, you can use the .prettier config file to override a lot of the default settings. If you’re on a team though, you might have disagreements about the right way to format code.

Deferring to the default might be a good way to settle that. Also if you get used to the defaults, it is likely when you open someone else’s project that uses prettier, you will feel right at home.

Not even having to think about it is the best.

I add format and format-watch scripts to all my package.json’s.

{
"scripts": {
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"format-watch": "npm run format && onchange \"**/*.{js,jsx,json,md}\" -- prettier --write {{changed}}",
},
"devDependencies": {
"onchange": "^7.0.2",
"prettier": "^2.0.5"
}
}

Then with a simple command, after every save and you can watch all your messy code snap into place.

npm run format-watch