Javascript ESLint未检测到导入的React组件

我遇到了一个问题，ESLint没有使用“无未使用的vars”规则检测导入的React组件。我的组件已导入：

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

---

我正在使用atom文本编辑器，其中安装了linter和linter eslint包，这两个包都是最新版本的。要让linter检测导入组件的使用，我缺少了什么？

默认情况下，ESLint不会检测JSX中使用的变量。要将它们标记为已使用，应使用插件的规则。

@MayankShukla错误为“无未使用的变量”。您可以在eslint文档中了解更多信息：不，它似乎与我的React配置有关，但我不确定是什么。我不太熟悉ESLint以及它需要如何配置。这就解决了它。谢谢没问题，很高兴它有帮助：我花了一段时间才启用此设置-命名不是很直观。它需要规则：{react/jsx使用vars:error}

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