What is

and why you need it

Paul Thomas - @motionimaging

Lead Developer at Immersive Labs - we're hiring!

Fight!

Which of these code blocks is correctly formatted?

a) if ( this ) { foo('bar'); }

b) if(this){
     foo("bar");
   }

a) const options = { width, height, title } = this.props;

b) const options = { 
       width, 
       height, 
       title, 
       description,
   } = this.props;

What about this block of code?

Spot the difference

• Single or multi-line
• Space or no space before (parenthesis)
• Space within {curly brackets} or no space
• Trailing comma or not trailing comma
• Tabs or spaces
• 2 spaces or 4 spaces
• Single or double quotes

Who cares!?

What should we care about?

• How code works
• Time efficiency
• Keeping our 'flow'

We shouldn't be worried about how code looks

• End users won't care
• No effect on functionality
• Loss of 'flow' during coding
• 'Discussions' over 'correct' format amongst team

But... within a team...?

Code consistency is important

What is Prettier?

 Opinionated Code Formatter

• stop all the on-going debates over styles
• ensures that all outputted code conforms to a consistent style
• Support for
• JavaScript, JSX, Flow, TypeScript, CSS, Less, and SCSS, JSON, GraphQL, Markdown

Why use Prettier

• Fully automatic
• Supported via many text editors
• Great for onboarding
• Great for newcommers to programming
• Easy to integrate into workflow
• No change to functionality

Before and after

from https://jlongster.com/prettier-1.0

Before and after

http://www.tutorialgear.com/best-vs-code-extensions-for-web-developers/

How to use Prettier

• Via text editor on save
• Via GitHook
• Via command line
• As you code
• Pre-commit
• Pre-push
• Lint-staged

With ESLint

• Prettier for formatting
• ESLint for functionality
• ESLint is great for code quality
  • Unused variables

  • console.log()

  • // TODO

Configuration

• You can, but you shouldn't
• If you opine you create disputes
• Everyone hates it equally
• Prettier did it = not your fault

Thanks!

Paul Thomas - @motionimaging

Lead Developer at Immersive Labs - we're hiring!

https://slides.com/paulthomas-1/what-is-prettier-why-you-need-it