ESLint avec React donne des erreurs " no-unused-vars`
j'ai configuré eslint& eslint-plugin-react.
Quand je lance ESLint, le linter retourne no-unused-vars erreurs pour chaque composante de réaction.
je suppose qu'il 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 .eslintrc.json fichier:
{
"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"
]
}
}
4 réponses
Dans votre .eslintrc.json sous extends, sont les suivants plugin:
'extends': [
'plugin:react/recommended'
]
Pour résoudre ce problème uniquement sans l'ajout de nouvelles règles à partir de react/recommended installer eslint-plugin-react:
npm i eslint-plugin-react --save
ajouter .eslintrc.js:
"plugins": ["react"]
et:
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars":
"error"
}
puisque j'ai trouvé ceci en googlant, vous devez savoir que cette règle simple est suffisante pour empêcher ce message:
react/jsx-uses-react
react/recommended ensemble de règles ajoute beaucoup d'autres règles vous ne voulez pas.
dans mon cas je devais ajouter dans votre .eslintrc.js:
'extends': [
'plugin:react/recommended'
]
plus un ajustement spécifique pour se débarrasser de preact import:import { h } from 'preact' mais vous pouvez utiliser cet exemple pour vous débarrasser de vos avertissements spécifiques comme suit:
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "^h$"
}
],