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.
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