Steps to setup ESLint with Airbnb style guide from default React App

setup-eslint-react-app.md

• Create the app: npm init react-app my-react-app && cd my-react-app

• Setup ESLInt (for the last point I choose JSON so that I can copy-paste the generated file to package.json: npx eslint --init

  • How would you like to use ESLint? To check syntax, find problems, and enforce code style
  • What type of modules does your project use? JavaScript modules (import/export)
  • Which framework does your project use? React
  • Does your project use TypeScript? No
  • Where does your code run? Browser
  • How would you like to define a style for your project? Use a popular style guide
  • Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
  • What format do you want your config file to be in? JSON
  • Would you like to install them now with npm? No → otherwise you end up with duplicate deps with conflicting versions
  • I REPEAT, DON'T INSTALL THE MODULES WITH npm install

• Just install the Airbnb config for ESLint: yarn add --dev eslint-config-airbnb@latest

• Dump the ESLint config content to the console: cat .eslintrc.json

• Copy-paste everything and replace the object behind "eslintConfig": with this block in package.json.

• Under the "env" section of that ESLint config, add a line: "jest": true (don't forget the comma at the end of previous line)

• Still in package.json, under "scripts" add a line: "lint": "npx eslint --fix src/**/*.js*",

• Now you can lint and auto-fix your code with npm run lint or yarn lint