In modern web development, maintaining code quality and consistency is crucial. Tools like Prettier help format code automatically, while Husky ensures that certain checks (like formatting) are performed before code is committed or pushed to a repository. Combining Husky with Prettier in a React project ensures that your codebase remains clean, consistent, and free from formatting issues for that, we need to know how to use Husky.
In this article, we’ll walk through how to set up Husky with Prettier in a React project and explain why this setup is essential.
Why & How to use Husky with Prettier?
1. Enforce Code Formatting
Prettier automatically formats your code according to predefined rules. By integrating it with Husky, you can ensure that every commit adheres to these formatting rules, preventing unformatted code from being added to the repository.
2. Improve Collaboration
When working in a team, consistent code formatting is vital. Husky and Prettier ensure that all team members follow the same formatting rules, reducing conflicts and making the codebase easier to read and maintain.
3. Catch Errors Early
Husky allows you to run pre-commit or pre-push hooks, which can include linting, testing, or formatting checks. This ensures that errors are caught early in the development process, reducing the chances of breaking the build.
4. Automate Workflows
Instead of manually running formatting commands, Husky automates the process, saving time and ensuring that no step is skipped.
Steps to Set Up Husky with Prettier in a Project
Prerequisites
- A React or Next.Js project
- Node.js and npm/yarn installed.
Step 1: Install Dependencies
First, install Husky, Prettier, and lint-staged (a tool that runs commands on staged files).
npm install --save-dev husky prettier lint-staged
Or
yarn add --dev husky prettier lint-staged
Step 2: Initialize Husky
Initialize Husky in your project to set up Git hooks.
npx husky install
This creates a .husky directory in your project.
Step 3: Add a Pre-Commit Hook
Create a pre-commit hook that runs lint-staged before committing code.
npx husky add .husky/pre-commit "npx lint-staged"
This adds a pre-commit file in the .husky directory with the command to run lint-staged.
Step 4: Configure lint-staged
Create a .lintstagedrc file (or add a lint-staged section in package.json) to define which files should be formatted and how.
{
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write",
"git add"
]
}
This configuration tells lint-staged to:
- Format all JavaScript, TypeScript, JSON, CSS, SCSS, and Markdown files in the src directory using Prettier.
- Add the formatted files back to the Git staging area.
Step 5: Configure Prettier (Optional)
Create a .prettierrc file to define your Prettier formatting rules.
Example .prettierrc:
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
You can also create a .prettierignore file to exclude certain files or directories from formatting.
Example .prettierignore:
node_modules
build
dist
Step 6: Test the Setup
- Make some changes to your code and stage them using git add.
- Try committing the changes using git commit -m “Your message”.
If everything is set up correctly, Husky will run lint-staged, which will format the staged files using Prettier before committing.
Why Is This Setup Required?
1. Prevents Unformatted Code
Without Husky and Prettier, developers might forget to format their code, leading to inconsistencies in the codebase. This setup ensures that all code is formatted automatically before it is committed.
2. Saves Time
Manual formatting is time-consuming and error-prone. Automating the process with Husky and Prettier saves time and ensures consistency.
3. Improves Code Reviews
When code is consistently formatted, reviewers can focus on the logic and functionality rather than nitpicking formatting issues.
4. Reduces Merge Conflicts
Consistent formatting reduces the chances of merge conflicts caused by differences in code style.
Example Workflow
- A developer makes changes to a React component.
- They stage the changes using git add.
- When they run git commit, Husky triggers the pre-commit hook.
- lint-staged runs Prettier on the staged files, formatting them automatically.
- The formatted files are added to the commit.
- The commit is created with clean, formatted code.
Conclusion
Using Husky with Prettier in a React project is a best practice that ensures code quality and consistency. By automating the formatting process, you can focus on writing code rather than worrying about style issues. This setup is especially valuable in team environments, where consistent code formatting is essential for collaboration and maintainability.
Give it a try in your next React project, and experience the benefits of a cleaner, more efficient workflow!
