VSCode 加载插件失败找不到模块 'eslint-plugin-prettier'
VSCode failed to load plugin cannot find module 'eslint-plugin-prettier'
我正在我的项目中安装 eslint
和 Prettier
,并试图让自动代码格式化通过 VSCode 工作。当我转到 React 文件时,我看到 ESLint 出错,所以我打开 ESLint 控制台,我看到:
Failed to load plugin 'prettier' declared in 'js/.eslintrc.js': Cannot find module 'eslint-plugin-prettier'
我相信我已经安装了所有必要的模块,这是我的 package.json
文件的一部分:
"devDependencies": {
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.3",
"prettier": "1.19.1"
}
我唯一能想到的是,这是我的项目目录结构造成的,如下:
/
(some Java stuff out here)
js/
node_modules/
package.json
package-lock.json
.eslintrc.js
.prettierrc
供参考,这是我的 .eslintrc.js
:
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 2015,
sourceType: 'module'
},
extends: [
'prettier',
'plugin:prettier/recommended'
],
plugins: [
'react',
'prettier'
],
rules: {
}
}
为了进一步参考,这是我在 VSCode 中的 settings.json
:
{
"terminal.integrated.shell.osx": "/bin/zsh",
"editor.formatOnSave": false,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"eslint.validate": [ "vue", "html", "javascript", "javascriptreact"],
"prettier.disableLanguages": [
"javascript", "javascriptreact"
],
"eslint.workingDirectories": [
{ "mode": "auto" }
],
"liveServer.settings.donotShowInfoMsg": true,
"workbench.startupEditor": "welcomePage",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"liveServer.settings.donotVerifyTags": true,
"diffEditor.ignoreTrimWhitespace": false,
}
更新: 这似乎是 VSCode 对子目录进行自动格式化的问题。一旦我只打开 VSCode 中的 "project root" 子目录,它就会在保存时开始为我进行所有格式设置。我仍然很好奇我是否可以在没有这种解决方法的情况下使它工作。
我遇到了同样的问题。
在您的根工作区中,您有一个包含 settings.json
.
的 .vscode
文件夹
添加以下内容:
{
"eslint.workingDirectories": [
"./{PATH_TO_CLIENT}" // replace {PATH_TO_CLIENT} with you own path
]
}
相关问题:
升级到 eslint@7.32.0 解决了我的问题。之前在 ~7.10.0.如果使用它,请务必重新启动VSCode。
yarn upgrade eslint
# or
npm update eslint
我正在我的项目中安装 eslint
和 Prettier
,并试图让自动代码格式化通过 VSCode 工作。当我转到 React 文件时,我看到 ESLint 出错,所以我打开 ESLint 控制台,我看到:
Failed to load plugin 'prettier' declared in 'js/.eslintrc.js': Cannot find module 'eslint-plugin-prettier'
我相信我已经安装了所有必要的模块,这是我的 package.json
文件的一部分:
"devDependencies": {
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.3",
"prettier": "1.19.1"
}
我唯一能想到的是,这是我的项目目录结构造成的,如下:
/
(some Java stuff out here)
js/
node_modules/
package.json
package-lock.json
.eslintrc.js
.prettierrc
供参考,这是我的 .eslintrc.js
:
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 2015,
sourceType: 'module'
},
extends: [
'prettier',
'plugin:prettier/recommended'
],
plugins: [
'react',
'prettier'
],
rules: {
}
}
为了进一步参考,这是我在 VSCode 中的 settings.json
:
{
"terminal.integrated.shell.osx": "/bin/zsh",
"editor.formatOnSave": false,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"eslint.validate": [ "vue", "html", "javascript", "javascriptreact"],
"prettier.disableLanguages": [
"javascript", "javascriptreact"
],
"eslint.workingDirectories": [
{ "mode": "auto" }
],
"liveServer.settings.donotShowInfoMsg": true,
"workbench.startupEditor": "welcomePage",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"liveServer.settings.donotVerifyTags": true,
"diffEditor.ignoreTrimWhitespace": false,
}
更新: 这似乎是 VSCode 对子目录进行自动格式化的问题。一旦我只打开 VSCode 中的 "project root" 子目录,它就会在保存时开始为我进行所有格式设置。我仍然很好奇我是否可以在没有这种解决方法的情况下使它工作。
我遇到了同样的问题。
在您的根工作区中,您有一个包含 settings.json
.
.vscode
文件夹
添加以下内容:
{
"eslint.workingDirectories": [
"./{PATH_TO_CLIENT}" // replace {PATH_TO_CLIENT} with you own path
]
}
相关问题:
升级到 eslint@7.32.0 解决了我的问题。之前在 ~7.10.0.如果使用它,请务必重新启动VSCode。
yarn upgrade eslint
# or
npm update eslint