javascript - parser - ESLint con React da errores ''no-no-vars''

unexpected token arrow function react

Question

He configurado eslint y eslint-plugin-react .

Cuando ejecuto ESLint, el linter devuelve errores no-unused-vars para cada componente React.

Supongo que no reconoce que estoy usando JSX o la sintaxis 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 archivo .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

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

react/jsx-uses-react

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

Answer 2

De este problema de crear-reaccionar-aplicación github .

También puede agregar la siguiente línea sobre la primera línea:

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

Answer 3

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

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

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

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

Answer 4

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

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

Source

Answer 5

Para resolver este único problema sin agregar nuevas reglas desde react/recommended instalar eslint-plugin-react :

npm i eslint-plugin-react --save

agregue .eslintrc.js :

"plugins": ["react"]

y:

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