![](/img/trans.png)
[英]Failed to load plugin 'prettier' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-prettier'
[英]Dealing with "Failed to load plugin 'react' declared in '.eslintrc': Cannot find module 'eslint-plugin-react'" ESLint error
最近我使用“create-react-app”(React 16.9)更新了我的 React 项目
更新前一切正常,但突然出现以下 ESLint 错误:(在 output 选项卡中)
[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.
我的.eslintrc 文件:
{
"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,
}
}
我在全局和本地都安装了 ESLint 和 eslint-plugin-react,还有什么我在这里遗漏的吗?
npm install eslint-plugin-react@latest --save-dev
谢谢,我遇到了同样的问题,安装这个对我有用
我在 VS 代码中遇到了同样的问题。 在 VS Code ESLint 设置中添加以下设置:
{
"eslint.workingDirectories": [
"Dir1",
"Dir2"
],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
]
}
注意:Dir1 和 Dir2 是两个目录,带有各自的 .eslintrc 文件。
尝试检查您的 ESLint 插件工作目录,因为您的项目有一个带有 create-react-app 更新的新目录。 遇到了同样的问题,我通过在 ESLint 插件设置中检查我的工作目录来修复我的问题。
我也有类似的错误(我不确定原因是否相同,但这就是我发现问题的方式)。
因此,请确保 Require Stack 的路径(在错误中)没有指向您的项目目录之外。
所以你有你的项目的根目录(你有 node_modules 文件夹等)。 在终端$ cd ..
(转到保存您的项目的文件夹),然后执行以下操作:
$ ls -a
如果您看到名为 .eslintrc.js 的文件,请将其删除( $ rm .eslintr.js
)。 然后只需重新加载您的项目,问题(至少在我的情况下)就会消失。
找到了。
1. 在“扩展”部分只保留“eslint:recommended”。 删除所有其他人。
2. 删除了“插件”部分。
3. 重新启动 VSCode。
4. 像魅力一样工作!
我更新的 .eslintrc 文件如下所示:
{
"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,
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.