How ESLint and Prettier will benefit your team workflow

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

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

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

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

Example

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

Enters Prettier: prettier.io

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

Why Prettier?

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

Why Prettier?

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

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

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.

Ingress spottime: Conflicts in the team Story

Be careful with your policies Herzberg et al, 1959

Be careful with your policies

Thank you :-)

Shaping the Digital Experience wunder.io