ESLint con React da errores `no-unused-vars`

86

He configurado eslint& eslint-plugin-react.

Cuando ejecuto ESLint, el linter devuelve no-unused-varserrores para cada componente de React.

Supongo que no reconoce que estoy usando la sintaxis JSX o React. ¿Algunas ideas?

Ejemplo:

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

Errores 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

Aquí está mi .eslintrc.jsonarchivo:

{
    "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
fuente
Está importando Reactmientras no lo usa, solo está usando Component, que se importa correctamente.
GMaiolo
Eso tiene sentido, pero ¿por qué Headertambién tendría el error? (En realidad se necesita importar Reaccionar, de lo contrario cuando el JSX se transpiled, se le dará un error)
Don P
Esto no debería estar sucediendo a estas alturas. ¿Cuál es tu versión de eslint? github.com/eslint/eslint/issues/1905
daniloprates

Respuestas:

175

En su .eslintrc.json, debajo extends, incluya el siguiente complemento:

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

Fuente

Edwarddamato
fuente
1
Gran respuesta Por supuesto que deberías hacerlo primero (npm install --save-dev eslint-plugin-react)
skiabox
¿Qué pasa si usas airbnb? Intenté agregar 'plugin: react / recommended' antes, pero no funcionó. : más bonita / recomendada "," más bonita / reacciona ",],
jonny-harte
Aquí está la documentación autorizada ... github.com/yannickcr/eslint-plugin-react#recommended
Ken Lin
58

Para resolver este único problema sin agregar nuevas reglas desde la react/recommendedinstalación eslint-plugin-react:

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

añadir .eslintrc.js:

"plugins": ["react"]

y:

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

Dado que encontré esto mientras buscaba en Google, debe saber que esta simple regla es suficiente para evitar este mensaje:

react/jsx-uses-react

El react/recommendedconjunto de reglas agrega muchas otras reglas que quizás no desee.

Fiaxhs
fuente
7

En mi caso, necesitaba agregar su .eslintrc.js:

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

más un ajuste específico para deshacerse de la importación de preact: import { h } from 'preact'pero puede usar este ejemplo para deshacerse de sus advertencias específicas de esta manera:

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

Solución más rápida

Para ignorar todas las variables de TitleCase, agregue esto a su configuración de ESLint:

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

Arreglo correcto

Utilice eslint-plugin-react para ignorar las variables de React.

npm install eslint-plugin-react -D

Agregue esto a su configuración de ESLint:

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

Solución sugerida

Use eslint-plugin-react para mejorar su uso de JSX, no solo para silenciar este error.

npm install eslint-plugin-react -D

Agregue esto a su configuración de ESLint:

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

Si usa XO , consulte eslint-config-xo-react .

fregante
fuente
-1

Si crea el proyecto a través de la CLI create-react-app, puede npm run ejecteditar el campo package.json "eslintConfig", así:

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

el eslint estará cerrado

jack L
fuente