How ESLint and Prettier will benefit your team workflow David Corbacho - Decoupled Days 2021
Slide 2
Theory Static Code Analysis Tools that inspect the code without executing the software.
Linters Dynamic Code Analysis aka “testing”
Slide 3
Traditionally: CODE SMELL Static Code Analysis Tools that inspect the code without executing the software.
Linters Dynamic Code Analysis aka “testing”
PATTERNS BEST PRACTICES SECURITY FLAWS
STYLE
Slide 4
Linters
2002 by Douglas Crockford, JSON creator. Too opinionated.
2011. Fork of JSLint
2013 by Nicholas Zakas.
Community driven Not opinionated More configurable
Not opinionated Lots of configuration options Extensible with plugins + Supports Node.js + Keeps up with ES evolution + In 2014 adds support for JSX
Slide 5
Example
Slide 6
Example
Source: The Adoption of JavaScript Linters in Practice: A Case Study on ESLint
Slide 7
Enters Prettier:
prettier.io
Slide 8
Slide 9
With Prettier: CODE SMELL
Linters
PATTERNS BEST PRACTICES SECURITY FLAWS
FORMATTING
Code reviews
Slide 10
Why Prettier?
Slide 11
Why Prettier? Prettier allows you to focus on what’s important
Slide 12
Why Prettier?
Slide 13
Why Prettier?
Slide 14
Why Prettier?
Slide 15
Why Prettier?
Slide 16
Slide 17
Why Prettier? In Conclusion: ● ● ● ● ● ●
Reduces Friction. [Prettier choses formatting for you] Speed up Code Reviews Instant feedback 1 thing less to multi-task while coding Faster copy/pasting and refactoring Faster project onboarding
Slide 18
Drupal 8.6 comes with Prettier. This is an effort to standardize the formatting of our JavaScript in addition to the rules provided by ESLint. https://www.drupal.org/node/2986680
Slide 19
How to combine ESLint + Prettier Step 1: Use eslint-config-prettier to disable linter rules that conflicts with prettier
Step 2: ✅ Setup your editor to apply Prettier formatOnSave ✅ (Also optionally) with a pre-commit hook (lint-staged with husky) ❌ In the past I used to recommend (and there are many blog posts) about using eslint-plugin-prettier. This used to be best practice. Not any longer.
Slide 20
Ingress spottime: Conflicts in the team Story
Slide 21
Be careful with your policies
Herzberg et al, 1959