ESLint avec React donne des erreurs `no-used-vars`

Question

J'ai configuré eslint & eslint-plugin-react .

Lorsque j'exécute ESLint, linter renvoie des erreurs no-unused-vars pour chaque composant React.

Je suppose que cela ne reconnaît pas que j'utilise la syntaxe JSX ou React. Des idées?

Exemple:

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

Erreurs de 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
 

Voici mon fichier .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

Dans votre .eslintrc.json , sous extends , incluez le plugin suivant:

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

La source

Answer 2

Pour résoudre ce seul problème sans ajouter de nouvelles règles de react/recommended install eslint-plugin-react :

 npm i eslint-plugin-react --save
 

ajouter en .eslintrc.js :

 "plugins": ["react"]
 

et:

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

Answer 3

Depuis que j'ai trouvé ceci en cherchant sur Google, sachez que cette simple règle suffit à empêcher ce message:

 react/jsx-uses-react
 

L'ensemble de règles react/recommended ajoute de nombreuses autres règles indésirables.

Answer 4

Dans mon cas, je devais ajouter votre .eslintrc.js :

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

plus un ajustement spécifique pour supprimer l’importation de pré-acte: import { h } from 'preact' mais vous pouvez utiliser cet exemple pour vous débarrasser de vos avertissements spécifiques comme ceci:

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

Answer 5

De ce problème de créer-réagir-app github .

Vous pouvez également ajouter la ligne suivante au-dessus de la première ligne:

 // eslint-disable-next-line no-unused-vars
import React from 'react'