Husky in React Native

husky-readme.md

Husky in React native

prettier + eslint + lint-staged

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 list-staged

Configure eslint file

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
npx husky add .husky/pre-commit "npx lint-staged"

pre-commit file

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

Troubleshoot

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

• 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"