ESLint findet keine importierten React Components

Question

Ich habe ein Problem damit, dass ESLint importierte React-Komponenten nicht mit einer 'no-unused-vars'-Regel erkennt. Meine Komponenten werden importiert:

import MediaQuery from 'react-responsive'; 

und die Komponente verwendet wird, weiter unten in der Datei:

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

Meine .eslintrc.js Datei ist wie folgt:

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

Ich benutze der Atom-Texteditor mit den installierten linter- und linster-eslint-Paketen (beide aktuell mit den neuesten Releases). Was fehlt mir, damit der Linter die Verwendung der importierten Komponente erkennt?

Answer 1

ESLint erkennt standardmäßig keine in JSX verwendeten Variablen. Um sie als gebraucht zu markieren, sollten Sie die jsx-uses-vars Regel des eslint-plugin-react Plugins verwenden.