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

Question

我已经设置了 eslint 和 eslint-plugin-react。

当我运行 ESLint 时，每个 React 组件的 linter returns 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

首先，安装以下模块npm install --save-dev eslint-plugin-react。

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

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

Source

Answer 2

因为我在谷歌搜索时发现了这个，你应该知道这个简单的规则足以防止这个消息：

react/jsx-uses-react

react/recommended 组规则添加了 many other rules 你可能不想要的内容。

Answer 3

要解决这个唯一的问题而不添加来自 react/recommended 的新规则，请安装 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" 
}

Answer 4

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

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

加上一个特定的调整来消除预导入：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, refer to eslint-config-xo-react.

Answer 6

如果您通过 create-react-app CLI 创建项目，您可以 npm run eject，然后编辑 package.json "eslintConfig" 字段，如下所示：

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

eslint 将被关闭

Answer 7

如果您使用的是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 8

和我昨天开始学React一样的错误。终端显示错误，忽略未使用的变量错误非常简单。

终端错误：

Line 5:17:  'setBlog' is assigned a value but never used  no-unused-vars
Search for the keywords to learn more about each warning.

只需在您有未使用变量错误的变量前添加// eslint-disable-next-line这一行。喜欢，

// eslint-disable-next-line
const [blogs, setBlog] = useState(... my code)

Answer 9

根据 Official Docs of Eslint 你试过这个吗

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

添加此行，因为它位于代码中的任何位置。希望您的警告可能会消失，它可能会对您有所帮助

Answer 10

在eslintrc.js 添加以下将解决错误

  plugins: [
    'react/recommended',
  ],

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

Answer 11

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

In Package.json replace eslintConfig declaration

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "plugin":"react/recommended",
    "rules": {
      "react/jsx-uses-react": "error",   
       "react/jsx-uses-vars": "error" 
    }
  },

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

ESLint with React gives `no-unused-vars` errors

javascript

jsx

reactjs

eslint

最快的修复

更正

建议的修复