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

Posted 2023-02-21

【中文标题】带有 React 的 ESLint 给出了 `no-unused-vars` 错误

【英文标题】：ESLint with React gives `no-unused-vars` errors

【发布时间】：2019-01-12 02:31:09

【问题描述】：

我已经设置了 eslint 和 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"
        ]
    

【问题讨论】：

你在导入React而不使用它，你只是在使用Component，它是正确导入的。

这是有道理的——但为什么Header 也会出现错误？ （其实你需要导入 React，否则 JSX 被转译的时候会报错）

现在不应该发生这种情况。你的 eslint 版本是什么？ github.com/eslint/eslint/issues/1905

【参考方案1】：

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

  plugins: [
    'react/recommended',
  ],

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

【参考方案2】：

根据Official Docs of Eslint你有没有试过这个

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

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

【讨论】：

我认为这不是正确的方法。它没有解决答案，它只是隐藏它..

即使这是 eslint-plugin-react uses 的方法，在使用 react 时“修复”这些 eslint 警告的最佳方法实际上是使用 react 插件，否则迟早会出现其他警告。

【参考方案3】：

我昨天开始学习 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)

【讨论】：

这也不能解决问题。它只是对你隐藏它。从我的角度来看，它看起来不像是解决问题的方法

【参考方案4】：

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

【讨论】：

即使这是eslint-plugin-reactuses的方法，在使用react时“修复”这些eslint警告的最佳方法是实际使用react插件，否则迟早会出现其他警告。

【参考方案5】：

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

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

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

Source

【讨论】：

很好的答案。当然你应该先做（npm install --save-dev eslint-plugin-react）

如果你用的是airbnb呢？我之前尝试添加 'plugin:react/recommended' 但它不起作用:prettier/recommended", "prettier/react", ],

这里是权威文档...github.com/yannickcr/eslint-plugin-react#recommended

一个小问题，如果这是在一个 json 文件 (.eslintrc.json) 中，不应该用双引号吗？

【参考方案6】：

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

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

eslint 将被关闭

【参考方案7】：

最快修复

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

【参考方案8】：

要解决这个唯一的问题，无需从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" 

【讨论】：

这对我不起作用，我仍然收到来自 no-unused-vars 的警告

适用于我的 VScode

【参考方案9】：

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

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

加上一个特定的调整以摆脱 preact 导入：import h from 'preact' 但您可以使用此示例摆脱您的特定警告，如下所示：

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

【参考方案10】：

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

react/jsx-uses-react

react/recommended 规则集添加了您可能不想要的 many other rules。