ESLint с React дает ошибки `un-unused-vars`

Я установил eslint и eslint-plugin-react.

Когда я запускаю ESLint, linter возвращает no-unused-vars ошибки для каждого компонента React.

Я предполагаю, что это не признает, что я использую синтаксис JSX или React. Любые идеи?

Пример:

app.js

import React, { Component } from 'react';
import Header from './header.js';

export default class App extends Component {
  render() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }
}

Ошибки Linter:

/my_project/src/components/app.js
  1:8  error  'React' is defined but never used   no-unused-vars
  2:8  error  'Header' is defined but never used  no-unused-vars

Вот мой .eslintrc.json файл:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

Ответы

Ответ 1

В вашем .eslintrc.json, под extends, включите следующий плагин:

'extends': [
    'plugin:react/recommended'
]

Источник

Ответ 2

Чтобы решить эту единственную проблему, не добавляя новые правила из react/recommended установить eslint-plugin-react:

npm i eslint-plugin-react --save

добавить в .eslintrc.js:

"plugins": ["react"]

а также:

"rules": {   
     "react/jsx-uses-react": "error",   
     "react/jsx-uses-vars":
     "error" 
}

Ответ 3

Поскольку я нашел это во время поиска в Google, вы должны знать, что этого простого правила достаточно, чтобы предотвратить это сообщение:

react/jsx-uses-react

Набор правил react/recommended добавляет многие другие правила, которые могут вам не понадобиться.

Ответ 4

В моем случае мне нужно было добавить в ваш .eslintrc.js:

'extends': [
    'plugin:react/recommended'
]

плюс определенная настройка, чтобы избавиться от импорта preact: import { h } from 'preact' но вы можете использовать этот пример, чтобы избавиться от ваших конкретных предупреждений, например так:

    "no-unused-vars": [
        "error",
        {
            "varsIgnorePattern": "^h$"
        }
    ],