Prettier

or The Death of Format Disagreements

What is Prettier?

• An opinionated code formatter

• Support for

  • JavaScript (including ES2017)

  • TypeScript

  • CSS, SCSS

  • JSON

• Removes all original styles*

• Takes your code and reprints it from scratch taking line length into account

*Except for empty lines and multi-line objects

Why Prettier?

• Reduce mental overhead devoted to styling

• Code cleanup is very fast and automated

• Precommit hook means never having a build fail due to ESlint errors ever again

• Newcomers will never make style mistakes, nor need to learn "our style"

• You will never waste 1 minute of your time fixing format issues. Hit save. Fixed. Done.

• Prettier enforces line length for better legibility. Means reading each other's code more easily.

Dumpster Fire Code

Let's look at some code in Prettier's Playground

How to Prettier?

• Install in project

  • Script to run Prettier CLI

  • Precommit hook

  • .prettierrc

• Editor Integrations

  • All major editors

• ESlint

  • Plugin adds it to ESLint flow

  • Config to disable ESLint rules in conflict with Prettier settings

Resources for Prettier

https://github.com/prettier/prettier

 

https://prettier.io/playground

 

Introducing Prettier at ReactConf