# 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"`