ESLint with React gibt "no-unused-vars" -Fehler aus

86

Ich habe eslint& eingerichtet eslint-plugin-react.

Wenn ich ESLint ausführe, gibt der Linter no-unused-varsFehler für jede React-Komponente zurück.

Ich gehe davon aus, dass nicht erkannt wird, dass ich JSX- oder React-Syntax verwende. Irgendwelche Ideen?

Beispiel:

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-Fehler:

/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

Hier ist meine .eslintrc.jsonDatei:

{
    "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"
        ]
    }
}
javascript reactjs jsx eslint Don P.
quelle
Sie importieren, Reactwährend Sie es nicht verwenden, sondern nur Component, was korrekt importiert wird.
GMaiolo
Das macht Sinn - aber warum sollte Headerauch der Fehler sein? (Sie müssen React tatsächlich importieren, andernfalls wird beim Transpilieren von JSX ein Fehler ausgegeben.)
Don P
Dies sollte jetzt nicht passieren. Was ist deine Eslint-Version? github.com/eslint/eslint/issues/1905
daniloprates

Antworten:

175

Fügen Sie in Ihr .eslintrc.json, unter extends, das folgende Plugin ein:

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

Quelle

Edwarddamato
quelle
1
Tolle Antwort. Natürlich sollten Sie zuerst (npm install --save-dev eslint-plugin-react)
Skiabox
Was ist, wenn Sie Airbnb verwenden? Ich habe zuvor versucht, 'Plugin: Reagieren / Empfohlen' hinzuzufügen, aber es hat nicht funktioniert. Erweitert: ["Plugin: Reagieren / Empfohlen", "Airbnb", "Airbnb / Hooks", "Plugin: React-Redux / Empfohlen", "Plugin" : hübscher / empfohlen "," hübscher / reagieren ",],
jonny-harte
Hier ist die maßgebliche Dokumentation ... github.com/yannickcr/eslint-plugin-react#recommended
Ken Lin
58

Um dieses einzige Problem zu lösen, ohne neue Regeln aus der react/recommendedInstallation hinzuzufügen eslint-plugin-react:

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

hinzufügen .eslintrc.js:

"plugins": ["react"]

und:

"rules": {   
     "react/jsx-uses-react": "error",   
     "react/jsx-uses-vars": "error" 
}
Mihey Mik
quelle
14

Da ich dies beim Googeln gefunden habe, sollten Sie wissen, dass diese einfache Regel ausreicht, um diese Meldung zu verhindern:

react/jsx-uses-react

Der react/recommendedRegelsatz fügt viele andere Regeln hinzu, die Sie möglicherweise nicht möchten.

Fiaxhs
quelle
7

In meinem Fall musste ich Folgendes hinzufügen .eslintrc.js:

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

plus eine spezielle Optimierung, um den Vorimport zu entfernen: import { h } from 'preact'Sie können dieses Beispiel jedoch verwenden, um Ihre spezifischen Warnungen wie folgt zu entfernen :

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

Schnellste Lösung

Um alle TitleCase-Variablen zu ignorieren, fügen Sie dies Ihrer ESLint-Konfiguration hinzu:

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

Richtige Korrektur

Verwenden Sie eslint-plugin-react , um React-Variablen zu ignorieren.

npm install eslint-plugin-react -D

Fügen Sie dies Ihrer ESLint-Konfiguration hinzu:

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

Vorgeschlagene Lösung

Verwenden Sie eslint-plugin-react , um Ihre JSX-Nutzung zu verbessern und nicht nur, um diesen Fehler auszuschalten .

npm install eslint-plugin-react -D

Fügen Sie dies Ihrer ESLint-Konfiguration hinzu:

{
    "extends": [
        "plugin:react/recommended"
    ]
}

Wenn Sie XO verwenden , lesen Sie eslint-config-xo-react .

fregante
quelle
-1

Wenn Sie das Projekt über die CLI create-react-app erstellen, können Sie das npm run ejectFeld package.json "eslintConfig" wie folgt bearbeiten:

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

Der Eslint wird geschlossen

Buchse L.
quelle