輸入された反応成分が検出されないESLint

Question

輸入された反応成分が 'no-unused-vars'ルールで検出されないというESLintに問題があります。私のコンポーネントがインポートされます。

import MediaQuery from 'react-responsive'; 

やコンポーネントがさらに下のファイルで使用されます。

render() { 
    return (
    <MediaQuery maxDeviceWidth={750}> 
     <div style={styles.iconMobileContainerRight} > 
     <i className="fa fa-chevron-right" style={styles.checkboxMobile} aria-hidden="true" ></i> 
     </div> 
    </MediaQuery> 
); 
} 

マイ.eslintrc.jsファイルは次のとおりです。

module.exports = { 
    "env": { 
     "browser": true, 
     "commonjs": true, 
     "es6": true, 
     "node": true 
    }, 
    "extends": "eslint:recommended", 
    "parserOptions": { 
     "ecmaFeatures": { 
      "experimentalObjectRestSpread": true, 
      "jsx": true 
     }, 
     "sourceType": "module" 
    }, 
    "plugins": [ 
     "react" 
    ], 
    "rules": { 
     "indent": [ 
      "error", 
      2 
     ], 
     "linebreak-style": [ 
      "error", 
      "unix" 
     ], 
     "quotes": [ 
      "error", 
      "single" 
     ], 
     "semi": [ 
      "error", 
      "always" 
     ] 
    } 
}; 

私が使用していますlinterとlinter-eslintパッケージがインストールされた原子テキストエディタ（最新のリリースでは最新）。リンターにインポートされたコンポーネントの使用を検出させるために私は何が欠けていますか？

Answer 1

ESLintでは、デフォルトでJSXで使用される変数は検出されません。それらを使用済みとしてマークするには、eslint-plugin-reactプラグインのjsx-uses-varsルールを使用する必要があります。