What is Prettier?
One of the things I love about it is it’s not rigid with its rules. It makes some “logical” choices that I would make myself. For instance, Prettier will make a short const array declaration a one liner, but a declaration with a bunch of items in the array, it will split out into multiple lines to avoid horizontal scrolling (see demo GIF at the end). I love that.
VS Code Integration
Overriding Prettier settings in VS Code
By default Prettier uses 2 spaces for tabs. You can increase that to the VS Code default of 4 if you want extremely easily:
- Hit CTRL + , or Command + , on Mac to bring up the Settings.json
- Search for Prettier
- Click to the left of prettier.tabWidth on the left hand side and click Copy To Settings
- On the right side so you can change it to 4 and then hit Save to save your settings.json file.
You can scan the rest of the prettier options that show up in the search to see if there’s ones you want to override.
Formatting is something I never worry about anymore
I find when using Prettier, along with the Format On Save option in VS Code, I don’t think about how to format my code anymore. I don’t ever wonder “oh should I put this on multiple lines or keep it all in one line?” Instead, I focus on solving my problem, hit Save and let Prettier do the rest. It’s shocking how liberating this is. I end up with consistent formatting across my entire project instead of just doing whatever I felt was best at the time.
Prettier in Action