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