How to add code analyzer in React app JSX with ESLint?

*React app JSX with ESLint Coding Analysis Coding Analysis *

Configuration: You can configure ESLint according to your use case. There are two ways two configure ESLint :

Configuration Comments: These are JavaScript comments which are embedded into individual files to configure them
Configuration File: ESLint will use JavaScript/JSON/YAML file which contain information to configure the entire directory.
In this particular config, we will use JSON format i.e. .eslintrc.json to have our configurations, or else you can create the eslintConfig property in package.json and write these configurations in that property.

React app JSX with ESLint **
**1. Installing ESLint

npm install eslint –save-dev 

This installs ESLint for usage in local project

*2. Installing ESLint for React
*

npm install eslint-plugin-react --save-dev

Next we need to modify our package.json file according to given code instructions:

"extends": [
    "eslint:recommended",
    "plugin:react/recommended"
]

3. Add script to package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.js src/**/*.jsx",
    "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
}

Then you can run the command

npm run lint

Some command name that use for eslint

npx eslint App.js --fix
npx eslint ./src --fix

Disable

"rules": {
      "no-unused-vars": "off"
    }