How ESLint and Prettier will benefit your team workflow

A presentation at Decoupled Days 2021 in July 2021 in by David Corbacho Roman

Slide 1

Slide 1

How ESLint and Prettier will benefit your team workflow David Corbacho - Decoupled Days 2021

Slide 2

Slide 2

Theory Static Code Analysis Tools that inspect the code without executing the software. Linters Dynamic Code Analysis aka “testing”

Slide 3

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

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

Slide 5

Example

Slide 6

Slide 6

Example Source: The Adoption of JavaScript Linters in Practice: A Case Study on ESLint

Slide 7

Slide 7

Enters Prettier: prettier.io

Slide 8

Slide 8

Slide 9

Slide 9

With Prettier: CODE SMELL Linters PATTERNS BEST PRACTICES SECURITY FLAWS FORMATTING Code reviews

Slide 10

Slide 10

Why Prettier?

Slide 11

Slide 11

Why Prettier? Prettier allows you to focus on what’s important

Slide 12

Slide 12

Why Prettier?

Slide 13

Slide 13

Why Prettier?

Slide 14

Slide 14

Why Prettier?

Slide 15

Slide 15

Why Prettier?

Slide 16

Slide 16

Slide 17

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

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

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

Slide 20

Ingress spottime: Conflicts in the team Story

Slide 21

Slide 21

Be careful with your policies Herzberg et al, 1959

Slide 22

Slide 22

Be careful with your policies

Slide 23

Slide 23

Thank you :-)

Slide 24

Slide 24

Shaping the Digital Experience wunder.io