Use Prettier and Stop Worrying About Code Formatting

Originally published on Aug 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