title: VSCode failed to load plugin cannot find module 'eslint-plugin-prettier'
body: <p>I'm installing <code>eslint</code> and <code>Prettier</code> 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:</p>
  
  <blockquote>
    <p>Failed to load plugin 'prettier' declared in 'js/.eslintrc.js': Cannot find module 'eslint-plugin-prettier'</p>
  </blockquote>
  
  <p>I believe I have all the necessary modules installed, here is a piece of my <code>package.json</code> file:</p>
  
  <pre><code>  "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"
    }
  </code></pre>
  
  <p>The only thing I can think of is that this is being caused by my project directory structure, which is as follows:</p>
  
  <pre><code>/
  (some Java stuff out here)
  js/
    node_modules/
    package.json
    package-lock.json
    .eslintrc.js
    .prettierrc
  </code></pre>
  
  <p>For reference, here is my <code>.eslintrc.js</code>:</p>
  
  <pre><code>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: {
      }
    }
  </code></pre>
  
  <p>For further reference, here is my <code>settings.json</code> in VSCode:</p>
  
  <pre><code>{
      "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,
  }
  </code></pre>
  
  <p><strong>Update:</strong> 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.</p>