Configuré eslint y eslint-plugin-react .
Cuando ejecuto ESLint, el linter devuelve errores no-unused-vars para cada componente de React.
Supongo que no reconoce que estoy usando la sintaxis JSX o React. ¿Algunas ideas?
Ejemplo:
aplicación.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" ] } }Para resolver este único problema sin agregar nuevas reglas de react/recommended eslint-plugin-react :
npm install eslint-plugin-react --save-dev agregar en .eslintrc.js :
"plugins": ["react"]y:
"rules": { "react/jsx-uses-react": "error", "react/jsx-uses-vars": "error" }Como encontré esto mientras buscaba en Google, debe saber que esta regla simple 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.