A presentation at Decoupled Days 2021 by David Corbacho Roman
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?
Why Prettier?
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
These two tools combined can boost the quality of the code in your team. ESLint can save your team from critical mistakes, and Prettier will provide standard formatting
for free. You
can too.