Simple Git Hooks with Create React App ESLint and Husky

General guide on setting ESLint and Husky in your react project

First step is configuring eslint for you project. Only precondition is having Node installed on your machine.

1. Install eslist globally by running "npm install -g eslint"

2. Navigate to src/ directory, which is directory where package.json file is located.

3. run "eslint --init"
   Answer question about your eslint usage, framework you are using, code style etc. Set of questions is changing over time as eslint evolves so i'm not gonna post them here, since in a few months they will probably be outdated. You can play if safe and choose all defaults.
   

4. Install eslint plugin for react "npm install -g eslint-plugin-react"
   

5. Running init script created eslint config file in your src/ directory called .eslintrc.* ( * depending on config format you choose when answering questions on step 3, i recommend json format ) There are few customization we need to do in .eslintrc.* file
   

   1. In "env": section add jest , not adding jest will make eslint error out on jest specific functions
      like describe and it:
      "env": {
      "browser": true,
      "es6": true,
      "jest": true
      }
      
   2. In "extends": section add "eslint:recommended" and "plugin:react/recommended" :
      "extends": [
      "standard",
      "eslint:recommended",
      "plugin:react/recommended"
      ],
      
   3. Add any custom rules you want/need in "rules": section, here is the list off all eslint rules, bellow is an example off adding rule that semicolon is mandatory:
      

     "rules": {
       "semi": [2, "always"]
     }
   

6. Now you should be set and you can run eslint on your project. Navigate to src/ directory, open terminal and run eslint src/**/*.js
   You should see number of errors and warnings, fix them by using --fix flag: eslint --fix src/**/*.js
   This will fix almost all errors and warnings, if there are any left you have to manually fix them.
   That should be really easy since eslint gives you exact line and descriptive/googleable error about whats wrong.
   One example that you have to manually fix is serviceWorker.js file that create-react-app creates, it will have few console related errors that you can fix by adding /* eslint-disable no-console */ on top of the serviceWorker.js file.
   

7. You don't really want to always run linter manually from terminal, add npm scripts that run linter:
   Open package.json file, in "scripts": section add new eslint scripts
   

   // package.json
   "scripts": {
     // ... 
     "lint": "eslint src/**/*.js",
     "lint:fix": "eslint --fix src/**/*.js"
   },
   

   You can run these scripts with npm by running: npm run lint and npm run lint:fix
   

Git Hook with Husky

You should be all set on ESLint at this point, right now it's really easy to set up Git Hooks using Husky.

1. Install Husky: navigate to src/ directory, open terminal and run "npm install husky --save-dev"
   

2. Add "husky": section in package.json
   

  // package.json
  {
    "husky": {
      "hooks": {
        "pre-commit": "npm run lint",
        "pre-push": "npm run test"
      }
    }
  }

3. Now we have Git Hooks for commit and push actions. Every time you run git commit Husky will run "pre-commit" script so it will run "npm run lint", it will only let you commit your changes if validation passes.
   Same goes for git push Husky will run "pre-push" script that runs "npm run test" and lets you push only if all tests are passing.

4. Optional What if we want to run both test and lint scripts pre commit or pre push?
   
   We can do that by adding new script in package.json:
   

  // package.json
  {
    "scripts": {
      ...
      "test:all": "set CI=true && react-scripts test && npm run lint",
    }
  }

Setting CI=true is for making sure jest runs tests only ones and not run them in watch mode, since watch mode does not make sense for git hooks. Syntax above is for windows, on mac it should be something like:
"test:all": "CI=true react-scripts-ts test && npm run lint" Now all we need to do is pass new script in pre-commit or pre-push hook in package.json

  // package.json
  {
    "husky": {
      "hooks": {
        "pre-commit": "npm run lint",   // only lint on commit
        "pre-push": "npm run test:all"  // run new script on push
      }
    }
  }