How to add Eslint with Prettier to the Typescript React.JS project and run lint on each git commit or git push?

I will be using React.js project that was started from scratch, using create-react-app with typescript

npx create-react-app my-app --template typescript

## or
yarn create react-app my-app --template typescript

I have deleted CSS files, logo.svg, and cleaned up App.tsx file. I all other ways — I will be using a standard clean typescript React.js project.

Projects comparison. To the left — old version, to the right — new version.

Adding Eslint and Prettier to our project

Because we used create-react-app script, we will get eslint libraries automatically, so we don’t need to add them to our package.json file explicitly.

/node-modules folder:

node-modules library with eslint packages

---

If you are using custom react build, here are **package.json** dependencies:

"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.7.0",
    "@typescript-eslint/parser": "^3.7.0",
    "eslint": "^6.6.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^4.0.8",
    "typescript": "^3.9.7"
},

#hooks #husky #eslint #prettier #react