Using Prettier and husky to make your commits safe.

Bart Wijnants
Jun 14, 2017 · 4 min read

Whether you work in a team or by yourself, having consistently formatted code is important for readability and maintainability.

Tl;dr

Use Prettier to automatically format your JavaScript and use husky and lint-staged to add a precommit script that runs Prettier and your tests when you commit.

Check out the full code:

ESLint vs JavaScript Standard Style vs Prettier

For JavaScript there are solutions like ESLint that can check if your code is consistent. But ESLint requires a lot of configuration and while it can fix some things by itself, it often requires manual intervention when you screw up.

Then there is JavaScript Standard Style. This module is the complete opposite of ESLint. It requires no configuration and can also fix some of your code by itself. But having no configuration, it’s very opinionated.

And now there is also Prettier. The difference between Prettier and other lint tools is that Prettier doesn’t check your code. It just takes your code as input and spits out formatted code as output. Like JavaScript Standard Style, Prettier is opinionated but you have some options to customize the format. Because Prettier doesn’t check your code but parses it, everything will be fixed automatically. Sounds like the best of both worlds.

Hello Prettier

The best way to see the greatness of Prettier is to try it out.

Fire up your terminal and start typing:

Now you can write some poorly formatted code in foo.test.js:

And add a script package.json to run Prettier:

Now you can run Prettier from your terminal:

And you can see that the contents of foo.test.js have changed to:

What about that husky?

Prettier makes your code look pretty but what if you forget to run it before you check in?

You could run Prettier as a step during continuous integration but then you have to check your code in again if there are changes. It would be much easier if you made sure that no “ugly” files can be pushed or committed.

This is where husky comes in. Husky makes creating git hooks easy. Git hooks are scripts that git executes before or after and event. If husky runs Prettier for us then “ugly” files can never be committed. But it’s not that easy. Husky can run Prettier but the changed files won’t be added to our commit.

This problem can be solved by lint-staged. Lint-staged can run a lint tool, like Prettier, and immediately add them to the staged files.

Hook me up!

If you haven’t created a git repository yet now is the time, your hooks won’t work without a repository:

Add “node_modules” to the .gitignore file to avoid checking in too much:

Go back to your terminal and install husky for the hooks, lint-staged for adding the formatted files to the staged files and Jest to run some tests:

Create some scripts to hook everything up in your package.json file:

This story was written ages ago and in the meantime Husky has had quite some updates.The “precommit” script in the above code snippet won’t work anymore.

Create the correct scripts to hook everything up in your package.json file:

If you have an existing project that needs updating you can also run npx --no-install husky-upgrade from your console as described here.

Make some ugly and failing tests in foo.test.js:

Now try to commit:

The script ran and the test failed, foo.test.js got updated:

And husky stopped the commit:

If you fix the test and try again the commit should work.

Conclusion

Prettier, husky and lint-staged can improve your workflow by formatting your JavaScript files and running some scripts before every commit.

Check out the full code on GitHub.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store