[解決済み] ReactのESLintで、`no-unused-vars`エラーが発生する。

質問

設定したのは eslint &です。 eslint-plugin-react .

ESLint を実行すると、リンターは 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>
    );
  }
}

リンターエラーです。

/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"
        ]
    }
}

解決方法は？

まず、以下のモジュールをインストールします。 npm install --save-dev eslint-plugin-react .

そして、あなたの .eslintrc.json の下にある extends には、以下のプラグインを入れます。

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

ソース