Using Prettier with Husky

A couple months ago, I added Prettier to my projects where possible, and it's had a very positive affect on my minute-to-minute development time. I think it also has the potential for huge benefits in larger projects where each developer's syntax obsessions are a bit different. It creates a shared reading experience for every developer, and is easy to setup as a git hook and in most editors.

Prettier is self-described as an "opinionated code formatter", and I think it has two main benefits that are most obvious after using it:

1. You can write with whatever syntax preferences you want.
2. Reading new code looks similar regardless of who wrote it.

These benefit eliminate distractions that slow me from accomplishing whatever task I'm working on. If I'm writing code, I don't need to think about whether to use single quotes or double quotes, or wonder if I forgot to end a statement with a semicolon. Those thoughts can be left aside. If I'm reviewing someone else's code, I don't have to think about whether this code needs refactoring because the coding style is foreign to me. I can focus on the logic as much as possible.

It doesn't even matter if the formatting settings for Prettier match my individual preferences, because after enough time reading the set standard it won't be difficult.

Prettier + Husky

I recommend having Prettier format files on precommit, and it isn't hard to do with Husky and lint-staged.

After installing Prettier, Husky, and lint-staged as dev dependencies in the project, you'll want to add a hook for precommit that points to lint-staged in your package.json. It'll look something like this:

"scripts": {
    "precommit": "lint-staged"
},
"lint-staged": {
    "*.{js,jsx,json,css,md}": [
        "prettier --write",
        "git add"
    ]
}

Anytime git commit is run, Husky will first run all the files that match the file types specified by lint-staged through Prettier and then add them to the commit. By having this happen on commit and having these settings specified as part of the project, you don't have to worry that everyone has the same editor settings, or that you forgot to format a file.

Adding Prettier and running it on every commit will help create a more consistent style for your projects, increase readability, and decrease syntax focused tangents in your workflow.