A Step-by-Step Guide to Husky Integration

Nov 09, 2023

Save for later

» Home » Git Hooks to Automate Actions using Husky

Introduction:

Whenever we push our code in Git, we have to check code syntax issues or code styling. But we often forget these things, so how can we overcome this? The solution is to use an automated tool whenever we push our code changes in Git, it will automatically check syntax or styling issues. For this husky tool is the overall best choice.

What is Husky?

Husky is a tool that allows developers to easily manage Git hooks and run scripts at different stages of a commit. Git hooks are scripts that run at certain events in the Git lifecycle, such as before or after a commit, and can be used to automate code tasks or enforce standards. Husky supports all client-side Git hooks and is lightweight with zero dependencies.

What are Git Hooks?

Git hooks are scripts that run automatically every time a particular event occurs in a Git repository. They are shell scripts found in the hidden .git/hooks directory of a Git repository and trigger actions in response to specific events, such as before or after a commit, push, or merge. Git hooks can be used to automate tasks and enforce policies throughout the Git workflow.

Benefits of using Husky over other automation tools:

Lightweight and easy to use: Husky is a lightweight tool with zero dependencies, making it easy to install and use.
Supports all client-side Git hooks: Husky supports all client-side Git hooks, making it a versatile tool for automating code tasks.
Follows best practices: Husky follows npm and Yarn best practices regarding auto-install, making it easy to integrate with existing workflows.
User-friendly messages: Husky provides user-friendly messages, making it easy to understand what is happening during the Git lifecycle.
Custom hooks directory: Husky allows developers to specify a custom hooks directory, making it easy to organize and manage Git hooks.
Nested projects and monorepos: Husky supports nested projects and monorepos, making it a great tool for large-scale projects.

Prerequisites:

Ensure you have the following installed:

Node.js and npm: Download here
React Native CLI: Install via npm

				
					npm install -g react-native-cli

Xcode (for iOS) or Android Studio (for Android)
Ruby: Download here

Step 1: Install ESLint, Prettier, Husky, and lint-staged as dev dependencies using npm or yarn

				
					npm install --save-dev eslint prettier husky lint-staged

Step 2: Configure ESLint and Prettier by creating a .eslintrc.json file in the root directory of the project and adding the necessary rules and plugins

				
					{
  "extends": ["@react-native-community","plugin:prettier/recommended"],
  "plugins": ["prettier"], 
  "rules": { 
    "prettier/prettier": "error"
    } 
}

Step 3: Configure Husky by adding a “husky” object to the package.json file and specifying the pre-commit hook to run lint-staged.

				
					"husky": { 
   "hooks": { 
      "pre-commit": "lint-staged"
        }
      }

Step 4: Configure lint-staged by adding a “lint-staged” object to the package.json file and specifying the files to be checked by ESLint and formatted by Prettier.

				
					"lint-staged": 
    { "*.{js,jsx,ts,tsx}": [ 
        "eslint --fix",
        "prettier --write"
       ] 
   }

Best practices in React Native:

Use Husky to automate code tasks and enforce standards throughout the Git workflow.
Use Husky to run scripts at key points in the Git lifecycle, such as before or after a commit, to ensure code quality and consistency.
Use Husky to enforce policies, such as preventing pushes to certain branches or requiring issue numbers in commit messages.
Use Husky in conjunction with other tools, such as ESLint and Prettier, to automate code formatting and ensure code quality.
Use Husky to streamline workflows and improve productivity by automating repetitive tasks.

Common mistakes in React Native:

Configuration errors: If the configuration of Husky is incorrect, it may not run the desired scripts or may cause errors during the Git lifecycle.
Compatibility issues: Husky may not be compatible with certain versions of Git or other tools used in the development process.
Performance issues: Running scripts at key points in the Git lifecycle can slow down the development process, especially if the scripts are resource-intensive.
False positives: If the scripts run by Husky are too strict, they may flag code that is not actually problematic, leading to false positives.

Conclusion:

In conclusion, Husky is a powerful tool that allows developers to automate code tasks and enforce standards throughout the Git workflow. By running scripts at key points in the Git lifecycle, Husky can ensure code quality and consistency, and save time and money.

blog

React Native 0.72 vs 0.73 vs 0.74

Introduction: React Native continues to evolve rapidly, empowering React Native experts to build even more performant and efficient mobile apps. Keeping up with the latest releases is crucial for staying ahead of the curve. ‘React Native 0.72 vs 0.73 vs 0.74’, In this blog post dive into the key differences between React Native Versions 0.72, […]