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


86

我已经设定eslinteslint-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>
    );
  }
}

短绒错误:

/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,它已正确导入。
GMaiolo'3

那是有道理的-但是为什么Header还会出现错误?(您实际上需要导入React,否则当JSX被编译时,将产生错误)
Don P

现在不应该发生这种情况。您的押金是什么版本? github.com/eslint/eslint/issues/1905
daniloprates

Answers:


175

在您的.eslintrc.json中的下extends,包括以下插件:

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

资源


1
很好的答案。当然您应该先做(npm install --save-dev eslint-plugin-react)
skiabox

如果您使用airbnb怎么办?我尝试在之前添加“ plugin:react / recommended”,但无法正常扩展:[“ plugin:react / recommended”,“ airbnb”,“ airbnb / hooks”,“ plugin:react-redux / recommended”,“ plugin :prettier / recommended”,“
prettier


58

要解决此唯一问题而无需从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" 
}

14

由于我是在谷歌搜索时发现的,因此您应该知道,此简单规则足以防止出现此消息:

react/jsx-uses-react

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


7

就我而言,我需要添加.eslintrc.js

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

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

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

1

最快的修复

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


-1

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

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

陪同将被关闭

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.