Using Prettier with Git Hooks for Formatting Consistency
When working on a front-end project, it can be hard to keep consistency with your file’s formatting (spacing, indentation, quotation style, etc.).
Prettier works with your code to ensure consistency and allows your team to set shared standards.
Prettier works great, but it only works by default when you set it up within your IDE or manually run a command.
There is a VS Code plugin to help run Prettier commands, but I haven’t tried that out yet. What would be even nicer is if you could have it automatically run on the files you have changed before they are committed to your repository.
That’s where using Git Hooks comes in. Git Hooks allow us to run our own commands alongside git commands for maximum control over how our code is checked in.
By setting up a pre-commit Git Hook, we can run the Prettier command and ensure formatting consistency for all the developers working on our team before the changes are committed to the repository.
Husky works to connect the Git Hooks with our package.json file where the Prettier command is and gives us a file that can be committed to our repository so that the entire team shares the same setup.
Steps for Setting up the Pre-commit Hook
1. Install npm packages.
Npm install --save-dev prettier pretty-quick husky
2. Create a file named .prettierrc in the same folder as your package.json file. This will hold your Prettier configuration. Here’s an example:
{
"trailingComma": "es5",
"semi": true,
"tabWidth": 2,
"singleQuote": true,
"bracketSpacing": true,
"bracketSameLine": true
}
3. Add these script lines in your package.json file:
"scripts": {
...
"precommit": "pretty-quick --staged",
"prepare": "husky install .husky"
},
We want to run this command on pre-commit. It will run Prettier against all files that are staged to be committed.
"precommit": "pretty-quick --staged"
This prepare command will run automatically when a developer runs npm install to ensure they are set up with Husky in the expected location.
"prepare": "husky install .husky"
4. Run npm install again to trigger the prepare command and install Husky.
5. Create a pre-commit file with this command:
npx husky add .husky/pre-commit "npm run precommit"
6. Commit your changes, and you should now be all set.
Notes
One hurdle I ran into while setting up my project was that the .git folder and the package.json file were not at the same directory level. Husky expects them to be. I had to make a few minor adjustments to get this working for the scenario where the root of my repository was a folder level above and with package.json living inside a folder named “WebApp”.
1. The prepare script line must be aware of the needed path change.
"prepare": "cd .. && husky install WebApp/.husky"
2. The pre-commit file inside the .husky folder also needed to adjust directories.
#!/bin/sh . "$(dirname "$0")/_/husky.sh" cd WebApp/ npm run precommit
