ESLint未检测到导入的React组件

Question

我遇到了ESLint未检测到导入的React组件带有'no-unused-vars'规则的问题。我的部件均采用进口：

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软件包的原子文本编辑器（均为最新版本）。我错过了什么让linter检测到导入组件的使用？

Answer 1

默认情况下，ESLint不检测JSX中使用的变量。要将它们标记为已使用，您应该使用eslint-plugin-react插件的jsx-uses-vars规则。