ESlintの導入・使い方

$ npm show eslint

eslint@8.6.0 | MIT | deps: 38 | versions: 294
An AST-based pattern checker for JavaScript.
Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
eslint.org

keywords: ast, lint, javascript, ecmascript, espree

bin: eslint

dist
.tarball: https://registry.npmjs.org/eslint/-/eslint-8.6.0.tgz
.shasum: 4318c6a31c5584838c1a2e940c478190f58d558e
.integrity: sha512-UvxdOJ7mXFlw7iuHZA4jmzPaUqIw54mZrv+XPYKNbKdLR0et4rf60lIZUU9kiNtnzzMzGWxMV+tQ7uG7JG8DPw==
.unpackedSize: 2.7 MB

dependencies:
@eslint/eslintrc: ^1.0.5            escape-string-regexp: ^4.0.0        file-entry-cache: ^6.0.1            
@humanwhocodes/config-array: ^0.9.2 eslint-scope: ^7.1.0                functional-red-black-tree: ^1.0.1   
ajv: ^6.10.0                        eslint-utils: ^3.0.0                glob-parent: ^6.0.1                 
chalk: ^4.0.0                       eslint-visitor-keys: ^3.1.0         globals: ^13.6.0                    
cross-spawn: ^7.0.2                 espree: ^9.3.0                      ignore: ^4.0.6                      
debug: ^4.3.2                       esquery: ^1.4.0                     import-fresh: ^3.0.0                
doctrine: ^3.0.0                    esutils: ^2.0.2                     imurmurhash: ^0.1.4                 
enquirer: ^2.3.5                    fast-deep-equal: ^3.1.3             is-glob: ^4.0.0                     
(...and 14 more.)

maintainers:
- openjsfoundation <npm@openjsf.org>
- eslintbot <nicholas+eslint@nczconsulting.com>
- nzakas <nicholas@nczconsulting.com>
- ivolodin <ivolodin@gmail.com>

dist-tags:
es6jsx: 0.11.0-alpha.0  latest: 8.6.0           next: 8.0.0-rc.0        

published yesterday by eslintbot <nicholas+eslint@nczconsulting.com>

$ npm install eslint --save-dev eslint@8.6.0

$ npx eslint --init

? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? … 
❯ React
  Vue.js
  None of these

? Does your project use TypeScript? › No / Yes

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
　Browser
✔ Node

? How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

? Which style guide do you want to follow? … 
❯ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

? What format do you want your config file to be in? … 
  JavaScript
  YAML
❯ JSON

  "devDependencies": {
    "@babel/core": "^7.12.9",
--ここから--
    "eslint": "^8.6.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0"
--ここまで--
  },

✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest
✔ Would you like to install them now with npm? · No / Yes

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

'styles' was used before it was defined.eslint(no-use-before-define)

{

  省略

    "rules": {
        "no-use-before-define":0
    }
}

{/* eslint-disable-next-line */}

dist/assets/
sample.js

$ npx eslint ./src/**/*.jsx

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint ."　　←この一行を追加
  },

$ npm run lint

$ npm install eslint-plugin-jsx-a11y --save-dev

    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:jsx-a11y/recommended"　　←この一行を追加
    ],

    },
    "plugins": [
        "react",
        "jsx-a11y"　　←この一行を追加
    ],

function Image() {
  return <img src="/img.png" />;
}