Precisely Prettier Code

for sane code reviews

Hi.

I'm Pam.

also known as pamo

Señora Developer at One Medical

(we're hiring! 😉🙆🏻‍♀️)

This is the agenda

Why format code?
What is prettier?
What about eslint?
Introducing prettier without "diffsruption"
Git hooks with husky
Putting it all together

Why format code?

because John Papa said so
eliminate comments about style in code reviews 🚮
you'll enforce consistency of style over time ✅

What is prettier?

Prettier is an automated code formatting tool that formats the code to produce consistent spaces, commas, semicolons, parens, braces, and line breaks for many languages! 🤯

What about eslint?

The eslint --fix feature flag enables automatic fixes for lines of code that don't meet lint rules, so one might ask:

How is Prettier any different?

Does Prettier replace eslint?

Prettier enforces style like white space & quotes
eslint enforces best practices to avoid code anti-patterns plus style

You should use both! 👯‍♀️

Introducing prettier without "diffsruption"

One way to increase developer happiness 😍 is to ✨automagically✨ fix "broken" code.

Introducing Prettier can be seamless if everyone on the team uses the same editor.
If this is the case, you can encourage everyone to enable auto-formatting on save.

Introducing prettier without "diffsruption"

Not everyone may be excited about exclusively using VS Code. 😭
Automatic formatting outside of the editor is less disruptive.

Automatically format files that have been changed as a part of a commit!

Introducing prettier without "diffsruption"

One major downside of formatting the whole file is the whitespace...

DIFFSRUPTION.

These changes are irrelevant and increase the cognitive complexity of reviewing code. 😱

This diff looks fun

Right?

Introducing prettier without "diffsruption"

precise-commits, let's you format only the lines changed in the commit.

git hooks

a git pre-commit hook, let's you run a script on staged files before the commit is complete.

husky 🐶 makes git hooks easy 🎉.
- hook scripts can be checked into the repo for developer and CI machines.

Putting it All Together

So what do prettier, precise-commits, husky, AND eslint look like?

The precise-commits README is a good starting point.

Putting it All Together

There are some additional steps required to format code with both eslint and prettier.

Prettier docs have a nifty guide for eslint integration.

In summary, you'll need:

eslint-plugin-prettier
eslint-config-prettier
Updated eslint config
Prettier rules for style

{
  "extends": [
    "plugin:prettier/recommended"
  ]
}

Putting it All Together

To tie it all in together with husky, we introduced another package, lint-staged.

lint-staged allows us to run additional tasks or file specific tasks during the pre-commit hook.

"lint-staged": {
    "*.{md,json,scss}": [
      "npx precise-commits",
      "git add"
    ],
    "*.js": [
      "npx precise-commits --whitelist={app,spec}",
      "eslint --fix",
      "git add"
    ],
    "*.scss": [
      "sass-lint -c .sass-lint.yml -v -q"
    ]
}

👀

giphy

Resources

Hexacta blog: Why aren’t you using Prettier?
Prettier docs: Integrating ESLint
Precise Commits
StackOverflow: What's the difference between prettier-eslint, eslint-plugin-prettier and eslint-config-prettier?
Ready for Readable Code? - John Papa @ ng-conf 2018

Link to these slides

https://tr.im/prettier