Set-up linter and prettier for a React application

ESLint

To set-up ESLint for a project, follow the documentation from here: https://eslint.org/docs/latest/use/getting-started

Sometimes, we may have to skip setting up ESLint and use the one that comes with React instead.

See https://stackoverflow.com/questions/63912721/failed-to-load-config-react-to-extend-from

If you have eslint in your dependencies, remove that. The eslint from react-scripts will be used: "eslint": "^7.32.0"

Prettier

To set-up Prettier for a project, follow the documentation from here: https://prettier.io/docs/install

Errors:

Unable to run prettier with error node_modules/.bin/prettier: Permisson denied

chmod +x ./node_modules/.bin/prettier

Precommit hooks for both ESLint and Prettier

It is done using husky and lint-staged:

https://prettier.io/docs/precommit

If there are linting errors in the staged files, we will not be able to create commits.

In that case, we may have to remove the line about running running linting from the pre-commit hook.

"lint-staged" : {
  "*js": "eslint --cache"
  "*{js,css,md}": "prettier --write"
}