As developers, we all want our code to be consistent and easy to read. After all, we don't want to read badly formatted code written by others.
However, when working in a team or on a large project, maintaining consistent code formatting can be a challenge. That's where Prettier and Husky come in.
Prettier is a popular code formatter that automatically formats code according to a set of rules. Husky is a popular Git hook manager that makes it easier to manage and configure Git. One can run scripts automatically before each commit, allowing developers to ensure that code is properly formatted before it is committed to the repository.
In this post, we'll walk through the steps of setting up Prettier and Husky to ensure consistent code formatting in your projects.
Setting up Prettier
The first step is to install the Prettier package in your project.
npm install --save-dev prettier
Next, you'll need to create a configuration file for Prettier. This file should be named .prettierrc and should be located in the root directory of your project. Here's the one which I use mostly:
{
"parser": "babel",
"arrowParens": "avoid",
"trailingComma": "es5",
"singleQuote": true,
"semi": false,
"useTabs": true,
"tabWidth": 2,
"jsxSingleQuote": true
}
This configuration file specifies that Prettier sets options such as using Babel to parse the code, omitting parentheses when possible for arrow function parameters, using a trailing comma if allowed by the language, using single quotes for string literals and JSX attributes, omitting semicolons, using tabs for indentation, and setting the tab width to 2 spaces.
Once you have installed Prettier and created a configuration file, you can add a prettier:write a script to your package.json file. This script will allow you to format code automatically using Prettier.
"scripts": {
"prettier:write": "prettier --write \"src/**/*.{js,jsx}\""
}
Now, this will allow prettier to write on all the files which are inside src folder, with an extension of js, jsx. So, your whole project will get modified, and there would be too many changes if it's a big project.
But, if you want to only use prettier to change the files that are being committed, and not the whole project, set up this code:
{
"scripts": {
"prettier:write": "git diff --cached --name-only --diff-filter=ACMR \"*.js\" \"*.jsx\" \"*.ts\" \"*.tsx\" | xargs npx prettier --config .prettierrc --write"
}
}
This script runs the git diff command to get a list of files (*.js, .jsx, .ts, and .tsx) that have been changed. xargs is a command-line utility that allows you to take the output from one command and use it as arguments for another command. In this case, xargs is used to pass the list of files selected by the git diff command as arguments to the npx prettier command which runs Prettier on each file.
Setting Up Husky
Now that you've set up the Prettier configuration to format your code, it's time to set up Husky.
Step 1: Install Husky
First, you'll need to install Husky as a dev dependency in your project, as well as initialize it using husky-init.
npx husky-init && npm install
It will set up husky, modify package.json and create a sample pre-commit hook that you can edit. By default, it will run npm test when you commit.
Step 2:
Configure Husky to run prettier before committing. For this, open this file .husky/pre-commit. You can remove npm test, if it's not required.
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm test
# Run Prettier
npm run prettier:write
# Add the formatted files back to the staging area
git add .
The git add . command is also included to add any changes made by Prettier to the staging area.
Testing
Now that you've set up Husky to run Prettier before each commit, you can test the setup by making changes to your code. Do git add . followed by git commit. Husky should automatically run Prettier before the commit is made, and you should see the changes reflected in the file.
P.S.: I put ChatGPT to work for creating my prettier:write script, and it did not disappoint! If you need any custom configuration, give it a try!
References:
Top comments (0)