Precisely Prettier Code
for sane code reviews
Hi.
I'm Pam.
also known as
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
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"
]
}👀
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
Precisely Prettier Code
By Pamela Ocampo
Precisely Prettier Code
How we automated code formatting without whitespace diffsruption AND some.
