PRETTIER

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

custom OPTIONS

Prettier tries to enforce the same code style without 100s of options, thus there are just a few settings you can change. Here are some of them.

• Print Width
• Tab Width
• Tabs
• Semicolons
• Quotes
• Quote Props
• JSX Quotes
• Trailing Commas
• Bracket Spacing
• JSX Brackets
• Arrow Function Parentheses
• End of Line

prettier vs eslint

Linters have two categories of rules

Formatting rules: eg: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style...

Prettier alleviates the need for this whole category of rules. Prettier is going to reprint the entire program from scratch in a consistent way, so it's not possible for the programmer to make a mistake there anymore.

Code-quality rules: eg no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors...

Prettier does nothing to help with those kind of rules. They are also the most important ones provided by linters as they are likely to catch real bugs with your code.

advantages

• Stop all the on-going debates over styles
• Having a common style guide is valuable for a project and team
• Consistent code style throughout the entire code base done AUTOMATICALLY
• Better code review
• Helping Newcomers
• Writing code faster
• Easy to adopt
• Clean up an existing codebase

disadvantages

• Could take some time to setting things up (Precommit hooks, vs code extesion, work with Eslint, ignore files, etc)
• Opinionated styles, with just a few options to customize 

ESLINTS errors

The Eslint rules that are the least met generally are:

• Maximum line length
  Could be fixed by Prettier
   
• React best practices rules
  (setState in life cycle methods, props related, and class methods order)
  Could not be fixed by Prettier

Prettier playground