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

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.

Julez · Accepted Answer · 2021-07-20T23:09:35.500

31

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

edited Jul 20 '21 at 23:09

answered Apr 03 '20 at 15:57

Julez

1,184
2
16
23

2

Brilliant. The project I had was in a subfolder, and that fixed it. – slhck Jun 03 '20 at 16:53
1

@Julez is `{PATH_TO_CLIENT}` something we need to replace, or is it a special variable we can use as is? I have a bunch of packages in my monorepo under `package/**` can I use a glob? – mesqueeb Mar 28 '21 at 12:10
@mesqueeb Its something you need to change relative to your project. i was just showing it for reference. – Julez May 17 '21 at 12:58
@Julez do I need to keep the {} in there ? – mesqueeb May 17 '21 at 13:17
No, you replace `{PATH_TO_CLIENT}` with your own path – Julez Jul 20 '21 at 23:07

Brian Ogden · Answer 2 · 2022-06-20T00:36:08.940

5

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.

edited Jun 20 '22 at 00:36

answered Jun 20 '22 at 00:30

Brian Ogden

18,439
10
97
176

Restarting vscode fixed it for me too. – Danny Aug 06 '22 at 02:22
restarting only the eslint service also worked for me instead of the whole VS CODE – Ricardo Silva May 16 '23 at 13:20

score 0 · Answer 3 · answered Sep 16 '21 at 13:42

0

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

answered Sep 16 '21 at 13:42

Matt

5,800
1
44
40

score 0 · Answer 4 · answered Sep 07 '22 at 08:22

0

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

answered Sep 07 '22 at 08:22

Kanishka Sahu

119
2
3

score 0 · Answer 5 · answered Sep 13 '22 at 10:39

0

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

answered Sep 13 '22 at 10:39

Aman Jha

308
4
4

score 0 · Answer 6 · answered Dec 22 '22 at 02:49

0

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.

answered Dec 22 '22 at 02:49

clodal

1,615
20
33

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

6 Answers6

Linked