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

Question

我已设置eslint＆amp; eslint-plugin-react。

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

我假设它没有意识到我使用的是JSX或React语法。有什么想法吗？

示例：

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

Linter错误：

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

Answer 1

在.eslintrc.json下的extends下，添加以下插件：

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

Source

Answer 2

要解决此问题而不添加react/recommended安装eslint-plugin-react的新规则：

npm i eslint-plugin-react --save

添加.eslintrc.js：

"plugins": ["react"]

和

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

Answer 3

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

react/jsx-uses-react

react/recommended套规则会增加您可能不想要的many other rules。

Answer 4

在我的情况下，我需要添加.eslintrc.js：

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

加上一个特定的调整来摆脱preact导入：import { h } from 'preact'但你可以使用这个例子去除你的具体警告：

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

Answer 5

最快的解决方法

要忽略所有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。

Answer 6

如果您使用的是 Create-react-app，则无需安装任何东西或 Eject，简单的解决方案是：

由于 no-unused-vars-errors 是从 webpackHotDevClient.js 抛出的，所以您只需要转到 /node_modules/react-scripts/config/webpack.config.dev.js. 在“新 ESLintPlugin”规则上添加：

'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'no-unused-vars': 0

Answer 7

根据Official Docs of Eslint你是否尝试过这个

/* eslint no-unused-vars : "off" */

添加此行，因为它位于代码中的任何位置。希望你的警告可以消失，它可以帮助你

Answer 8

从此create-react-app github issue。

您还可以在第一行上方添加以下行：

// eslint-disable-next-line no-unused-vars
import React from 'react'

Answer 9

如果通过create-react-app CLI创建项目，则可以npm run eject，并编辑package.json“ eslintConfig”字段，如下所示：

`"eslintConfig": {
    "extends": "react-app",
    "rules": {
      "eqeqeq": "off",
      "no-unused-vars": "off",
    }
  },`

陪同将被关闭