Prettier + pre-commit hooks are the bomb

❗

Honestly, I’m putting this here mostly for my own reference on future projects 🙂

I can’t imagine a project where this functionality would be undesirable. I’ve been a long-time user of formatOnSave in VSCode - but there always seems to be a barrier or misalignment with team members working on the same project. I’m sure we could commit a .vscode folder - but there is something unnerving about that.

Enter Git Hooks…

It’s pretty satisfying, watching Git do the work for you. Basically, everything you need to know is here:

Pre-commit Hook · Prettier

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as "staged" via git add before you commit. Use Case: Useful for when you want to use other code quality tools along with Prettier (e.g. ESLint, Stylelint, etc.)

https://prettier.io/docs/en/precommit.html

But the implementation I’m most interested in boils down to this magic command:


npx mrm@2 lint-staged

…and voila! You’ve got squeaky clean code coming straight into your git push 🎉