VSCode failed to load plugin cannot find module 'eslint-plugin-prettier' - visual-studio-code

Question

I'm installing eslint and Prettier in my project and trying to get automatic code formatting to work through VSCode. When I go to a React file, I see that ESLint is in error so I open up the ESLint console where I see:
Failed to load plugin 'prettier' declared in 'js/.eslintrc.js': Cannot find module 'eslint-plugin-prettier'
I believe I have all the necessary modules installed, here is a piece of my package.json file:
"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"
}
The only thing I can think of is that this is being caused by my project directory structure, which is as follows:
/
(some Java stuff out here)
js/
node_modules/
package.json
package-lock.json
.eslintrc.js
.prettierrc
For reference, here is my .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: {
}
}
For further reference, here is my settings.json in VSCode:
{
"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,
}
Update: It seems like this is an issue with VSCode doing autoformatting on subdirectories. Once I opened just the subdirectory as the "project root" in VSCode then it started doing all the formatting for me on save. I'm still curious if I can get this working without this workaround.

Answer 1

i had the same issue.
In your root workspace you have a .vscode folder with a settings.json.
Add the following:
{
"eslint.workingDirectories": [
"./{PATH_TO_CLIENT}" // replace {PATH_TO_CLIENT} with you own path
]
}
related issue: create-react-app subfolder projects do not lint

Answer 2

VSCode/eslint will not pick newly installed npm packages in the node_modules directory. After running npm i eslint-plugin-prettier restart the VSCode workspace. Happens to me consistently, every time I setup a new Javascript/Node/React project and add eslint & prettier, using this guide in the order it suggests.

Answer 3

Upgrading to eslint#7.32.0 fixed the issue for me. Was previously on a ~7.10.0. Be sure to restart VSCode if using it.
yarn upgrade eslint
# or
npm update eslint

Answer 4

Here is the working solution :
Steps :
Remove node_modules and yarn.lock/npm.lock
Reinstall packages with yarn or npm.
Install eslint again with npm i --save-dev eslint eslint-plugin-jest or yarn add --dev eslint eslint-plugin-jest

Answer 5

try this command will solve your problem: worked for me as well:)
npm i eslint-plugin-prettier#latest -D

Answer 6

Check that you don't have duplicated copies of eslint in your package i.e. yarn list eslint should only return one version. Otherwise de-dedupe by checking the versions in you package.json and ensure that yarn.lock is not interfering.