Husky in React native

prettier + eslint + lint-staged + eslint-plugin-diff

Husky lets us run commands or script before committing or pushing our code to git. It works as a pre runner before commiting anything.

Install dependencies

yarn add -D husky prettier eslint lint-staged

Configure eslint file (IF not configured)

npm init @eslint/config

// select below options for process
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · Yes
✔ Which package manager do you want to use? · yarn

Update package.json file

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

Configure husky

npx husky init

Update pre-commit file at /.husky/pre-commit

npx lint-staged

Config Change

If you want to avoid warnings | Click here for more

{
...
  "lint-staged": {
    "src/**/*.{js,ts,tsx}": [
      "prettier --write",
      "eslint --quiet"
    ]
  }
...
}

If you want to include warnings also if no error

max-warnings=0 means it'll not pass until warning will become zero

{
...
  "lint-staged": {
    "src/**/*.{js,ts,tsx}": [
      "prettier --write",
      "eslint --max-warnings=0"
    ]
  }
...
}

If you want to show errors on staged file's changed lines only | eslint-plugin-diff

yarn add -D eslint-plugin-diff

Update .eslintrc.js

module.exports = {
  extends: ['plugin:diff/diff', 'your-other-configs'],
};

Troubleshoot

Warning: React version not specified in eslint-plugin-react settings. Click here

• Update .eslintrc.js file

...
  "settings": {
    "react": {
      "version": "detect"
    }
  }
...

Test integration

• Update any component file add junky code
• hit git add <file> && git commit -m "test husky"