{"id":642,"hash":"c1d439fb6c04e21e64434b674585345abd35724bbd43286e927353208def332b","pattern":"VSCode failed to load plugin cannot find module 'eslint-plugin-prettier'","full_message":"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:\n\n  Failed to load plugin 'prettier' declared in 'js/.eslintrc.js': Cannot find module 'eslint-plugin-prettier'\n\nI believe I have all the necessary modules installed, here is a piece of my package.json file:\n\n  \"devDependencies\": {\n    \"babel-eslint\": \"^10.0.3\",\n    \"babel-loader\": \"^8.0.6\",\n    \"eslint\": \"^6.8.0\",\n    \"eslint-config-prettier\": \"^6.10.0\",\n    \"eslint-loader\": \"^3.0.3\",\n    \"eslint-plugin-prettier\": \"^3.1.2\",\n    \"eslint-plugin-react\": \"^7.18.3\",\n    \"prettier\": \"1.19.1\"\n  }\n\nThe only thing I can think of is that this is being caused by my project directory structure, which is as follows:\n\n/\n(some Java stuff out here)\njs/\n  node_modules/\n  package.json\n  package-lock.json\n  .eslintrc.js\n  .prettierrc\n\nFor reference, here is my .eslintrc.js:\n\nmodule.exports = {\n    root: true,\n    env: {\n      browser: true,\n      node: true\n    },\n    parserOptions: {\n      parser: 'babel-eslint',\n      ecmaVersion: 2015,\n      sourceType: 'module'\n    },\n    extends: [\n      'prettier',\n      'plugin:prettier/recommended'\n    ],\n    plugins: [\n        'react',\n        'prettier'\n    ],\n    rules: {\n    }\n  }\n\nFor further reference, here is my settings.json in VSCode:\n\n{\n    \"terminal.integrated.shell.osx\": \"/bin/zsh\",\n    \"editor.formatOnSave\": false,\n    // turn it off for JS and JSX, we will do this via eslint\n    \"[javascript]\": {\n        \"editor.formatOnSave\": false\n    },\n    \"[javascriptreact]\": {\n        \"editor.formatOnSave\": false\n    },\n    // tell the ESLint plugin to run on save\n    \"eslint.validate\": [ \"vue\", \"html\", \"javascript\", \"javascriptreact\"],\n    \"prettier.disableLanguages\": [\n        \"javascript\", \"javascriptreact\"\n    ],\n    \"eslint.workingDirectories\": [\n        { \"mode\": \"auto\" }\n    ],\n    \"liveServer.settings.donotShowInfoMsg\": true,\n    \"workbench.startupEditor\": \"welcomePage\",\n    \"editor.codeActionsOnSave\": {\n        \"source.fixAll.eslint\": true\n    },\n    \"liveServer.settings.donotVerifyTags\": true,\n    \"diffEditor.ignoreTrimWhitespace\": false,\n}\n\nUpdate: 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.","ecosystem":"npm","package_name":"visual-studio-code","package_version":null,"solution":"i had the same issue.\n\nIn your root workspace you have a .vscode folder with a settings.json.\n\nAdd the following:\n\n{\n  \"eslint.workingDirectories\": [\n    \"./{PATH_TO_CLIENT}\" // replace {PATH_TO_CLIENT} with your own path\n  ]\n}\n\nrelated issue: create-react-app subfolder projects do not lint","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/60064590/vscode-failed-to-load-plugin-cannot-find-module-eslint-plugin-prettier","votes":22,"created_at":"2026-04-19T04:51:25.714300+00:00","updated_at":"2026-04-19T04:51:25.714300+00:00"}