Git Commit Hooks, linting and formatting the code with Prettier before committing it to GitHub using Husky.

Let’s get started

Once you are done setting up your react application, configuring the eslint rules and prettier rules we can move on to installing Husky.

  • .eslintrc.json
"extends": ["next", "next/core-web-vitals", "eslint:recommended", "prettier"],
"rules": {
"@next/next/no-img-element": "off"
  • .prettierrc.js
module.exports = {
trailingComma: "es5",
tabWidth: 2,
semi: true,
singleQuote: false,
arrowParens: "always",
useTabs: true,
bracketSpacing: true,
yarn add -D husky
"prepare":"husky install"
yarn prepare
yarn husky add .husky/pre-commit "echo Welcome to the Cutieverse!"
"scripts": {
"lint": "next lint",
"format": "prettier --ignore-unknown --write .",
"prepare": "husky install",
"precommit": "yarn lint && yarn format && git add -A ."

The problem

This is just a way around that I’ve found because normally when you push something to GitHub you add the files with git add ...


In conclusion, you can either keep the && git add -A . at the end of the precommit script and always make sure of the changes you made, since this solution will automatically add to the commit all the files within the codebase that suffered modifications or lint and format manually before every commit.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store