Pretty Quick Husky
How to achieve inner peace through automated code formatting
Command Palette
Search for a command to run...
Comments
Join the discussionNo comments yet. Be the first to comment.
Search for a command to run...
How to achieve inner peace through automated code formatting
No comments yet. Be the first to comment.
TL;DR: Add pretty-quick and husky to your project to automatically format your code at commit time and never worry about inconsistent formatting again.
npm install --save-dev prettier pretty-quick husky
npm set-script prepare "husky install" && npm run prepare && npx husky add .husky/pre-commit "npx pretty-quick --staged"
git add . && git commit -m "add pretty-quick and husky"
Consistent code formatting makes for a happier development experience. Keeping code consistently formatted is another matter. Whether working alone or with a team, life is too short to worry about The One True Brace Style, let alone the age old question of tabs vs spaces.
Opinionated formatting tools like Prettier make this problem go away by automatically applying a consistent style guide. Prettier can be run from the command line or automatically on save in many IDEs. However, this still requires some degree of developer set up. We can do better.
Ideally, we want to run Prettier after a developer has made their code changes but before those changes are committed to the repository. Fortunately, git has us covered.
Git Hooks are a feature of git that let you create scripts to be triggered by specific actions in git. One example is the pre-commit hook that is run right at the start of the committing process; that's exactly when we want to run Prettier. We can configure git hooks manually, but I prefer to use husky.
One potential problem: our pre-commit hook needs to be fast. Running Prettier on every file on every commit may work for small codebases, but will be painfully slow on large ones. Fortunately, we can use pretty-quick to run Prettier on only the files that are staged. Neat.
First, install our dependencies:
npm install --save-dev prettier pretty-quick husky
Next, husky needs a second install step, we put that in npm's 'prepare' script.
npm set-script prepare "husky install" && npm run prepare
The
preparescript is one of npm's life cycle scripts. It is automatically run afternpm install(and at other times). Setting this script ensures that husky is automatically installed for all developers when they runnpm install.
Now we add our pre-commit git hook:
npx husky add .husky/pre-commit "npx pretty-quick --staged"
Now, we should be good to go. If you run:
git add .
git commit -m "add pretty-quick and husky"
Then you should see something like this:
hereward@manticore:~/code/pretty-quick-husky$ git add . hereward@manticore:~/code/pretty-quick-husky$ git commit -m "add pretty-quick and husky" 🔍 Finding changed files since git revision b00c5fa. 🎯 Found 2 changed files. ✅ Everything is awesome! [main c29cdf7] add pretty-quick and husky 3 files changed, 900 insertions(+), 2 deletions(-) create mode 100755 .husky/pre-commit create mode 100644 package-lock.json hereward@manticore:~/code/pretty-quick-husky$
All done.
Presented as a single code-block for your copy/paste convenience:
npm install --save-dev prettier pretty-quick husky
npm set-script prepare "husky install" && npm run prepare
npx husky add .husky/pre-commit "npx pretty-quick --staged"
git add . && git commit -m "add pretty-quick and husky"
Also a gist for you to bookmark.
// Versions used when writing this article
"npm": 8.1.2
"husky": 7.0.4
"prettier": 2.5.1
"pretty-quick": 3.1.3