ESLint 没有检测到导入的 React 组件

Posted 2023-03-22

【中文标题】ESLint 没有检测到导入的 React 组件

【英文标题】：ESLint not detecting imported React Components

【发布时间】：2017-07-16 08:11:51

【问题描述】：

我遇到了一个问题，ESLint 没有使用“no-unused-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>
  );

我的 .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 软件包的 atom 文本编辑器（两者都是最新版本）。为了让 linter 检测到导入组件的使用，我缺少什么？

【问题讨论】：

@MayankShukla 错误是“no-unused-vars”。您可以在 eslint 文档中了解更多信息：eslint.org/docs/rules/no-unused-vars

不，这似乎与我的 React 配置有关，但我不确定是什么。我对 ESLint 以及它需要如何配置不是很熟悉。

【参考方案1】：

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

【讨论】：

修复了它。谢谢！

没问题，很高兴它有帮助:)

我花了一段时间才启用此设置 - 命名不是很直观。它需要"rules": "react/jsx-uses-vars": "error"