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

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

Made with Slides.com