Elevating Team Development with React Pre-Commit Hooks, Prettier and ESLint

In a team-based React development environment, maintaining code quality, consistency, and collaboration are essential. One way to achieve this is by leveraging pre-commit hooks along with Prettier and ESLint. In this blog post, we will explore the setup process and discuss how this powerful combination can enhance your team’s development workflow and contribute to a seamless and efficient collaborative environment.

Why Team Development Matters

When multiple developers work on a React project, ensuring consistency in coding styles, standards, and practices becomes crucial. Without a unified approach, the codebase can quickly become messy, making it harder to maintain, debug, and extend. By adopting tools that automate code formatting, enforce linting rules, and promote best practices, teams can streamline their development process and improve code quality.

Understanding these tools

These tools serve the purpose of maintaining the quality of your code whether you’re working individually or as part of a team

• Eslint: It functions as a linter specifically designed for JavaScript. Linters are tools that enable you to establish rules that should be adhered to while writing your code. Eslint ensures that you adhere to these rules by providing warnings or errors when violations occur.
• Prettier: This tool is a code formatter that automatically adjusts the formatting of your code to make it appear more organized and easier to read. There are various code formatters available, but Prettier is widely recognized as the most popular one.
• Husky: This tool facilitates the execution of scripts, particularly when working with version control systems like git In our case, we can utilize Husky to set up pre-commit scripts that run Prettier and Eslint automatically before each commit. It's important to note that you must be working within a Git repository to utilize Husky effectively

Setting Up Pre-Commit Hooks

Setting up pre-commit hooks involves a few simple steps. Here’s a quick guide to get you started

Step 1: Install Required Packages

To begin, navigate to your React project’s root directory and install the necessary packages as development dependencies

npm install --save-dev husky lint-staged prettier eslint eslint-plugin-react@latest

Step 2: Configure ESLint

Create an ESLint configuration file in the project’s root directory. You can do this by running the following command. follow the prompts to set up ESLint based on your project’s requirements. This will generate an .eslintrc.js file with your chosen configuration.

npm init @eslint/config

You can create one more file to ignore the files that we don't want to apply linting such as the node_modules, JSON and etc, so we can create a file .eslintignore and mention below and you can add more if u want to ignore any more files

build
node_modules
public
.env.*
.eslintignore
.eslintrc.json
.gitignore
*.json
package.json
package-lock.json


Step 3: Configure Prettier

Create a Prettier configuration file in the project’s root directory by creating a file called .prettierrc . Define your desired formatting rules in this file to ensure code consistency across the team.

{
"semi": true,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"jsxBracketSameLine": false
}


You can create one more file to ignore the files that we usually don't prettify such as the node_modules, JSON and etc, so we can create a file .prettierignore and mention below

Step 4: Configure Husky and lint-staged

• initialize husky

npx husky install

this will help you to initialize and create a folder called .husky

Add prepare script to package.json, this script will trigger to enable Git hooks after installation. This step also depends on our npm version.

• npm > 7: npm set-script prepare "husky install"
• npm < 7: Copy "prepare": "husky install" to scripts in package.json
• Add pre-commit hook

npx husky add .husky/pre-commit "npx lint-staged"

The installation of Husky and lint-staged will generate a pre-commit hook named pre-commit within the .husky folder. This hook is triggered automatically when executing the git commit command.

Why lint-staged?

Running the linting process before committing your code is a sensible approach as it allows you to prevent any errors from being included in the repository and enforce a consistent code style. However, conducting linting on an entire project can be time-consuming, and the results may not always be relevant. The ideal scenario is to exclusively lint the files that are being committed, focusing on the relevant code changes.

create a new file named .lintstagedrc.json and add the following code within it

{
"**/*": [
"prettier --write --config ./.prettierrc --ignore-unknown",
"eslint --fix --quiet"
]
}


Now to test this you can run the following git commands

git init
git add .
git commit -m "add lint-staged & husky"


This will run the pre-commit scripts and will look something like this

How Pre-Commit Hooks Benefit Team Development:

1. Consistency and Readability: By automating code formatting with Prettier, you ensure that the codebase adheres to a consistent style, making it easier for team members to read, understand, and collaborate on each other’s code.
2. Catching Potential Issues Early: ESLint helps identify potential code errors, enforcing coding standards and best practices. Running ESLint as a pre-commit hook ensures that problematic code is caught and addressed before it reaches the shared repository.
3. Streamlined Code Reviews: Streamlined Code Reviews: With pre-commit hooks, the burden of reviewing and addressing code formatting and linting issues is lifted from manual code reviews. This allows team members to focus on higher-level architecture and logic, resulting in faster and more efficient code reviews.
4. Improved Collaboration: Adopting pre-commit hooks, Prettier, and ESLint establishes a common ground for development practices within the team. This reduces friction and facilitates collaboration by providing a shared understanding of code quality standards and formatting guidelines.

Hope this blog helps you in setup up Eslint, Prettier, and Husky in your React application