ESLint con React restituisce errori "no-unused-vars"


91

Ho configurato eslint& eslint-plugin-react.

Quando eseguo ESLint, il linter restituisce no-unused-varserrori per ogni componente React.

Presumo che non riconosca che sto usando la sintassi JSX o React. Qualche idea?

Esempio:

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>
    );
  }
}

Errori di 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

Ecco il mio .eslintrc.jsonfile:

{
    "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"
        ]
    }
}

Stai importando Reactmentre non lo usi, stai solo usando Component, che è importato correttamente.
GMaiolo

Ha senso, ma perché dovrebbe Headeranche avere l'errore? (In realtà è necessario importare React, altrimenti quando il JSX viene traspilato, darà un errore)
Don P

Non dovrebbe succedere adesso. Qual è la tua versione eslint? github.com/eslint/eslint/issues/1905
daniloprates

Risposte:


181

Innanzitutto, installa il seguente modulo npm install --save-dev eslint-plugin-react.

Quindi, nella tua .eslintrc.json, sotto extends, includi il seguente plugin:

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

fonte


1
Ottima risposta Ovviamente dovresti fare prima (installazione npm --save-dev eslint-plugin-react)
skiabox

E se utilizzi airbnb? Ho provato ad aggiungere "plugin: react / recommended" prima ma non ha funzionato si estende: ["plugin: react / recommended", "airbnb", "airbnb / hooks", "plugin: react-redux / recommended", "plugin : carino / consigliato ","
carino / reattivo

Ecco la documentazione autorevole ... github.com/yannickcr/eslint-plugin-react#recommended
Ken Lin

60

Per risolvere questo problema solo senza l'aggiunta di nuove regole da react/recommendedinstallare eslint-plugin-react:

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

aggiungere .eslintrc.js:

"plugins": ["react"]

e:

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

14

Dato che l'ho trovato mentre cercavo su Google, dovresti sapere che questa semplice regola è sufficiente per evitare questo messaggio:

react/jsx-uses-react

L' react/recommendedinsieme di regole aggiunge molte altre regole che potresti non volere.


7

Nel mio caso avevo bisogno di aggiungere il tuo .eslintrc.js:

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

più un aggiustamento specifico per sbarazzarsi dell'importazione preact: import { h } from 'preact'ma puoi usare questo esempio per sbarazzarti dei tuoi avvisi specifici in questo modo:

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

4

Soluzione più rapida

Per ignorare tutte le variabili TitleCase, aggiungilo alla tua configurazione ESLint:

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

Correzione corretta

Usa eslint-plugin-react per ignorare le variabili React.

npm install eslint-plugin-react -D

Aggiungi questo alla tua configurazione ESLint:

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

Correzione suggerita

Usa eslint-plugin-react per migliorare l'utilizzo di JSX, non solo per silenziare questo errore.

npm install eslint-plugin-react -D

Aggiungi questo alla tua configurazione ESLint:

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

Se usi XO , fai riferimento a eslint-config-xo-react .


-1

Se crei il progetto tramite la CLI create-react-app, puoi npm run ejecte modificare il campo package.json "eslintConfig", in questo modo:

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

l'eslint verrà chiuso

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.