ReactのESLintは `no-unused-vars`エラーを返します

Question

セットアップしましたeslint & eslint-plugin-reactです。

私がESLintを実行すると、linterは各Reactコンポーネントのエラーno-unused-varsを返します。

私は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> 
    ); 
    } 
} 

リンターエラー：

0：ここ

/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ファイルですextendsの下であなたの.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" ] } } 

Answer 1

は、以下のプラグインが含ま：グーグルながら、あなたはこの単純なルールは、このメッセージを防止するのに十分であることを知っている必要があり、私はこれを見つけたので

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

Source

Answer 2

：

react/jsx-uses-react 

react/recommendedのルールセットには、many other rulesあなたは欲しくないかもしれません。 .eslintrc.jsに追加インストールeslint-プラグインに反応

NPM I eslint-プラグインに反応react/recommendedから新しいルールを追加することなく、--save

この唯一の問題を解決するために

Answer 3

：

"プラグイン"：[ "反応する"]

と

"ルール"：{ "反応/ JSX-用途は反応し"： "エラー"、 "/ JSX-用途-VARS反応する"： "エラー"}