带有 React 的 ESLint 给出了 `no-unused-vars` 错误

IT技术 javascript reactjs jsx eslint
2021-03-08 06:39:53

我已经设置eslint& eslint-plugin-react。

当我运行 ESLint 时，linter 会no-unused-vars为每个 React 组件返回错误。

我假设它没有意识到我正在使用 JSX 或 React 语法。有任何想法吗？

例子：

应用程序.js

import React, { Component } from 'react';
import Header from './header.js';

export default class App extends Component {
  render() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }
}

短绒错误：

/my_project/src/components/app.js
  1:8  error  'React' is defined but never used   no-unused-vars
  2:8  error  'Header' is defined but never used  no-unused-vars

这是我的.eslintrc.json文件：

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}
6个回答

首先，安装以下modulenpm install --save-dev eslint-plugin-react。

然后，在您的.eslintrc.json, 下extends，包含以下插件：

'extends': [
    'plugin:react/recommended'
]

来源

很好的答案。当然你应该先做（npm install --save-dev eslint-plugin-react）
2021-04-25 06:39:53
狡辩，如果这是在 json 文件 ( .eslintrc.json) 中，不应该用双引号引起来吗？
2021-05-04 06:39:53
2021-05-11 06:39:53
如果你使用airbnb呢？我之前尝试添加 'plugin:react/recommended' 但它没有用 extends: [ "plugin:react/recommended", "airbnb", "airbnb/hooks", "plugin:react-redux/recommended", "plugin :prettier/recommended", "prettier/react", ],
2021-05-15 06:39:53

要在不从react/recommendedinstall添加新规则的情况下解决这个唯一的问题eslint-plugin-react：

npm install eslint-plugin-react --save-dev

添加.eslintrc.js：

"plugins": ["react"]

和：

"rules": {   
     "react/jsx-uses-react": "error",   
     "react/jsx-uses-vars": "error" 
}
使用 VScode 对我有用
2021-04-18 06:39:53
这对我不起作用，我仍然收到来自 no-unused-vars 的警告
2021-04-29 06:39:53

由于我在谷歌搜索时发现了这一点，您应该知道这个简单的规则足以防止出现此消息：

react/jsx-uses-react

这react/recommended组规则添加了许多您可能不想要的其他规则。

就我而言，我需要添加您的.eslintrc.js：

'extends': [
    'plugin:react/recommended'
]

加上一个特定的调整来摆脱 preact 导入：import { h } from 'preact'但是你可以使用这个例子来摆脱你的特定警告，如下所示：

    "no-unused-vars": [
        "error",
        {
            "varsIgnorePattern": "^h$"
        }
    ],

最快的修复

要忽略所有 TitleCase 变量，请将其添加到您的 ESLint 配置中：

{
    "rules": {
        "no-unused-vars": [
            "error",
            {
                "varsIgnorePattern": "^[A-Z]"
            }
        ]
    ]
}

正确修复

使用eslint-plugin-react忽略 React 变量。

npm install eslint-plugin-react -D

将此添加到您的 ESLint 配置中：

{
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-uses-vars": "error",
        "react/jsx-uses-react": "error"
    }
}

建议修复

使用eslint-plugin-react来改善你的 JSX 使用，而不仅仅是为了消除这个错误。

npm install eslint-plugin-react -D

将此添加到您的 ESLint 配置中：

{
    "extends": [
        "plugin:react/recommended"
    ]
}

如果您使用XO，请参阅eslint-config-xo-react。

其它你可能感兴趣的问题
上一篇按排序顺序遍历 Javascript 关联数组 下一篇<input type="number" /> 当它的值改变时会触发什么事件？