ESLint com React fornece erros `no-unused-vars`

86

Eu configurei eslint& eslint-plugin-react.

Quando executo o ESLint, o linter retorna no-unused-varserros para cada componente React.

Presumo que ele não esteja reconhecendo que estou usando a sintaxe JSX ou React. Alguma ideia?

Exemplo:

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

Erros 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

Aqui está meu .eslintrc.jsonarquivo:

{
    "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
fonte
Você está importando Reactsem usar, apenas usando Component, que foi importado corretamente.
GMaiolo
Isso faz sentido - mas por que haveria Headertambém o erro? (Você realmente precisa importar o React, caso contrário, quando o JSX for transpilado, ele dará um erro)
Don P
Isso não deveria estar acontecendo agora. Qual é a sua versão do eslint? github.com/eslint/eslint/issues/1905
daniloprates

Respostas:

175

Em seu .eslintrc.json, em extends, inclua o seguinte plugin:

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

Fonte

Edwarddamato
fonte
1
Ótima resposta. Claro que você deve fazer primeiro (npm install --save-dev eslint-plugin-
react
E se você estiver usando airbnb? Eu tentei adicionar 'plugin: react / recomendado' antes, mas não funcionou extends: ["plugin: react / recomendado", "airbnb", "airbnb / hooks", "plugin: react-redux / recomendado", "plugin : mais bonita / recomendada "," mais bonita / reagir ",],
jonny-harte
Aqui está a documentação oficial
Ken Lin
58

Para resolver este único problema sem adicionar novas regras de react/recommendedinstalação eslint-plugin-react:

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

adicionar em .eslintrc.js:

"plugins": ["react"]

e:

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

Como encontrei isso ao pesquisar no Google, você deve saber que esta regra simples é suficiente para evitar esta mensagem:

react/jsx-uses-react

O react/recommendedconjunto de regras adiciona muitas outras regras que você pode não querer.

Fiaxhs
fonte
7

No meu caso, precisei adicionar o seu .eslintrc.js:

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

além de um ajuste específico para se livrar da importação de pré-ação: import { h } from 'preact'mas você pode usar este exemplo para se livrar de seus avisos específicos, como:

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

Conserto mais rápido

Para ignorar todas as variáveis ​​TitleCase, adicione isto à sua configuração ESLint:

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

Correção correta

Use eslint-plugin-react para ignorar as variáveis ​​React.

npm install eslint-plugin-react -D

Adicione isso à sua configuração ESLint:

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

Correção sugerida

Use eslint-plugin-react para melhorar seu uso de JSX, não apenas para silenciar esse erro.

npm install eslint-plugin-react -D

Adicione isso à sua configuração ESLint:

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

Se você usar o XO , consulte eslint-config-xo-react .

fregante
fonte
-1

Se você criar o projeto por meio da CLI create-react-app, poderá npm run ejecte editar o campo package.json "eslintConfig", como este:

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

a eslint será fechada

jack L
fonte