Récemment, j'ai mis à jour mon projet react en utilisant "create-react-app" (React 16.9)
Tout fonctionnait bien avant la mise à jour, mais soudainement, je reçois l'erreur ESLint suivante: (Dans l'onglet de sortie)
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": [
"react-app",
"eslint:recommended",
"plugin:react/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"settings": {
"react": {
"pragma": "React",
"version": "16.8"
}
},
"plugins": [
"react"
],
"rules": {
"quotes": [
"error",
"single",
{
"allowTemplateLiterals": true
}
],
"semi": "off",
"default-case": [
"error",
{
"commentPattern": "^no default$"
}
],
"no-new-wrappers": 0,
"no-mixed-operators": 0,
"require-atomic-updates": "off",
"comma-dangle": "off",
"no-unused-vars": "off",
"no-useless-constructor": 0,
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/no-unescaped-entities": 0,
"react/display-name": 0,
"jsx-a11y/href-no-hash": "off",
"jsx-a11y/anchor-is-valid": "off",
"no-useless-escape": 0,
"no-console": 0,
"no-debugger": 0,
"no-empty": 0,
"linebreak-style": 0,
"import/first": 0,
"import/imports-first": 0,
"no-shadow": 0,
"disable-next-line": 0,
"no-case-declarations": 0,
}
}
Mon fichier .eslintrc:
[Error - 16:42:12] Failed to load plugin 'react' declared in 'client\.eslintrc': Cannot find module 'eslint-plugin-react' Require stack: - C:\Or\Web\VisualizationTool\VisualizationTool\__placeholder__.js Referenced from: C:\Or\Web\VisualizationTool\VisualizationTool\client\.eslintrc Happened while validating C:\Or\Web\VisualizationTool\VisualizationTool\client\src\hoc\Layout\Layout.jsx This can happen for a couple of reasons: 1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc). 2. If ESLint is installed globally, then make sure 'eslint-plugin-react' is installed globally as well. 3. If ESLint is installed locally, then 'eslint-plugin-react' isn't installed correctly.
J'ai à la fois ESLint et eslint-plugin-react installés à la fois globalement et localement, quelque chose me manque ici?
3 Réponses :
Je l'ai trouvé.
1. Ne gardez que le "eslint: recommended" dans la section "extend". Supprimez tous les autres.
2. Suppression de la section "plugins".
3. Redémarrez le VSCode.
4. Fonctionne comme un charme!
Mon fichier .eslintrc mis à jour ressemble à ceci:
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"commonjs": true,
"node": true,
"es6": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"settings": {
"react": {
"pragma": "React",
"version": "16.9"
}
},
"rules": {
"quotes": [
"error",
"single",
{
"allowTemplateLiterals": true
}
],
"semi": 0,
"default-case": [
"error",
{
"commentPattern": "^no default$"
}
],
"react/jsx-uses-vars": 0,
"react/react-in-jsx-scope": 0,
"no-new-wrappers": 0,
"no-mixed-operators": 0,
"require-atomic-updates": "off",
"comma-dangle": "off",
"no-unused-vars": "off",
"no-useless-constructor": 0,
"react/no-unescaped-entities": 0,
"react/display-name": 0,
"jsx-a11y/href-no-hash": "off",
"jsx-a11y/anchor-is-valid": "off",
"no-useless-escape": 0,
"no-console": 0,
"no-debugger": 0,
"no-empty": 0,
"linebreak-style": 0,
"import/first": 0,
"import/imports-first": 0,
"no-shadow": 0,
"disable-next-line": 0,
"no-case-declarations": 0,
}
}
Essayez de vérifier les répertoires de travail de votre plugin ESLint étant donné que vous en avez un nouveau pour votre projet avec la mise à jour create-react-app. J'ai eu le même problème et j'ai corrigé le mien en vérifiant mes répertoires de travail dans les paramètres du plugin ESLint.
J'ai eu le même problème dans le code VS. Ajoutez les paramètres suivants dans les paramètres VS code ESLint:
{
"eslint.workingDirectories": [
"Dir1",
"Dir2"
],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
]
}
Remarque: Dir1 et Dir2 sont deux répertoires avec leurs fichiers .eslintrc respectifs.