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

Question

我设置eslint及eslint-plugin-react.

当我运行ESLint时,linter返回no-unused-vars每个React组件的错误.

我假设它没有意识到我正在使用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'
]

资源

Answer 2

要在不添加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 3

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

react/jsx-uses-react

该react/recommended组规则增加了许多其他的规则,你可能不希望.

Answer 4

2022年

如果您使用具有更多配置的 ESLint，请注意属性数组的顺序extends。

{
    extends: [
        'eslint:recommended',
        'plugin:react/jsx-runtime',
        'plugin:react/recommended',
        'plugin:prettier/recommended',
        'prettier',
      ],
      plugins: ['react'],

   //...
}

例如，确保放置'plugin:react/recommended'在任何其他反应配置之后。也作为插件放置'react'，如果您使用 prettier，请确保遵循正确的配置。

Answer 5

最快的修复

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

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

正确修复

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

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

将此添加到您的 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

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

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

加上特定的调整以消除之前的导入：import { h } from 'preact'但是您可以使用此示例摆脱特定的警告，如下所示：

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