Vscode-eslint: ESLint fails to load plugins when using ESLint 6.x

[samrith-s]

I have the following packages installed as dev deps:

{
    "babel-eslint": "^10.0.2",
    "eslint": "^6.0.1",
    "eslint-config-prettier": "^5.1.0",
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-prettier": "^3.1.0",
}

And this is my .eslintrc file:

{
    "parser": "babel-eslint",
    "plugins": ["import", "prettier"],
    "extends": [
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:import/warnings",
        "prettier"
    ],
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js"]
            }
        }
    },
    "env": {
        "es6": true,
        "browser": false,
        "node": true,
        "jquery": false,
        "jest": true
    },
    "rules": {
        "quotes": 0,
        "no-console": 1,
        "no-debugger": 1,
        "no-var": 1,
        "no-trailing-spaces": 0,
        "eol-last": 0,
        "no-underscore-dangle": 0,
        "no-alert": 0,
        "no-lone-blocks": 0,
        "import/extensions": 1,
        "import/no-named-as-default": 0,
        "prettier/prettier": [
            "error",
            {
                "singleQuote": true
            }
        ]
    },
    "globals": {
        "Atomics": false,
        "SharedArrayBuffer": false
    }
}

I have Format on Save on. When I run eslint --fix, it works properly. But when I hit save, I get the following error. It doesn't work for any plugin, even though I have all of them installed.

[CodingDive]

I'm getting the same error. I'm using TypeScript + Yarn workspaces + Lerna and have all the plugins installed locally and globally.

Failed to load plugin prettier: Cannot find module 'eslint-plugin-prettier'
Happened while validating foo.tsx This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure 'eslint-plugin-prettier' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-prettier' isn't installed correctly.

Restarting Visual Studio Code seemed to have fixed it temporarily for me but the issue keeps coming back.

[samrith-s]

I still continue to have this problem, even after restarting VS Code. I've tried everything:

• Deleting node_modules and yarn.lock and running yarn install again.
• Removing the packages and adding them again.
• Removing ESLint and adding it again.

And weirdly, it's just a problem with this project. In another project, I get this error:

6/26/2019, 6:35:31 PM:
----------------------
Cannot find module './utils/ast-utils'

[dbaeumer]

@samrith-s since this seems to be setup specific can you share a GitHub repository I can clone that demos this.

[samrith-s]

I unfortunately cannot share the repository, it's a private one on GitHub. I'll setup a repository which tries to replicate this.

Also, could you just tell me what does plugin 'import' specified in CLIOptions means?? I do not have ESLint globally, and I get this error even when I remove the plugins attribute from my RC file.

[samrith-s]

@dbaeumer Here is a reproducible repository. Do let me know if you get the error, because I am getting it in this repository as well.

https://github.com/samrith-s/vscode-eslint-reproduce-error

[samrith-s]

Also most likely related to this: https://github.com/prettier/prettier-vscode/issues/672

[dbaeumer]

@samrith-s actually it works for me

[samrith-s]

@dbaeumer I think this happened with Prettier-ESLint integration on. I'm closing this issue as it is related to the issue with prettier-vscode and not with vscode-eslint. I started getting these errors after upgrading to Node 12.

[sevenmay]

@dbaeumer I think this happened with Prettier-ESLint integration on. I'm closing this issue as it is related to the issue with prettier-vscode and not with vscode-eslint. I started getting these errors after upgrading to Node 12.

I have this same problem and i don't use prettier-vscode.

[samrith-s]

@sevenmay What version of Node are you on?

[sevenmay]

@sevenmay What version of Node are you on?

v8.11.2

[saostad]

same problem here.

[dbaeumer]

Do any of you use eslint.runtime setting to point to a node version. Otherwise VS Code eslint uses the one shipped with VS Code itself so it don't matter which node version you have installed.

[or2008]

same issue here,
Failed to load plugin 'jest' declared in '--config': Cannot find module 'eslint-plugin-jest'

eslint-plugin-jest and eslint are both installed globaly

[saostad]

Do any of you use eslint.runtime setting to point to a node version. Otherwise VS Code eslint uses the one shipped with VS Code itself so it don't matter which node version you have installed.

I am not using it.

[dbaeumer]

A GitHub repository that demos this is highly appreciated. Otherwise it is very hard to track this down.

[samrith-s]

Hey @dbaeumer, the repo I sent doesn't work with Node v12, but works with Node v10. I do not have eslint.runtime configured.

[saostad]

I think that's a prettier-vscode problem:

here is a repo to see:
https://github.com/saostad/react-typescript-starter

[UncleClapton]

Hi there!

I ran into this today while updating our ESLint config repository (found here).

I've done some digging and found that it's probably an incompatibility between vscode-eslint and ESLint 6, but without more detailed error reporting from the extension I can't pinpoint the problem.

Here's some major things I noted while testing:

• Problem began with ESLint 6. All versions of ESLint 5 I tried worked fine.
• Same error occurs for all plugins (import, babel, react, react-hooks, jsx-a11y in my case), eslint just reports the first one and gives up.
• ESLint 6 runs fine in CLI and other editors using the same config ESLint running under the extension fails out on.

I hope this helps find the root cause! I'm going to continue trying to find a workaround to make ESLint 6 work, but so far the only thing I've found is to downgrade to ESLint 5.16.0

[r-i-c-h]

I'm seconding that it's related to ESLint reaching a new semver V6 on Jun21/(6.01 on Jun24)

__Best Practice__ has always been to install eslint and setup .eslintrc files and plugins on project-by-project basis as defined in a project's package.json.

Real World is that many of us use either global eslint installations, global .eslintrc files, or globally-installed plugins. Before v6, to be used by a global eslint installation or .eslintrc file, one need only globally install the plugin via npm install --g eslint-config-_[airbnb]_ .

Apparently, as of ESLint v6, while you can still technically use a global eslint installation, all plugins need to be "locally" installed [per project].

See ESLint v6 Migration Docs for details.

[dbaeumer]

@r-i-c-h and @UncleClapton thanks for providing the detailed information.

I upgraded my test projects to use ESLint 6.0 and the latest version of the plugins and every thing works for me.

I tried to test https://github.com/fuelrats/fuelrats-eslint-config but I can't reach the repository. @UncleClapton is it public?

[Luxiyalu]

I was getting the same error for react-hooks config, and unchecking the VSCode option Use 'prettier-tslint' instead of 'prettier' dissipated the error for me.

[echarpibm]

Started having issues with ESLint today after experimenting with migration to node 12.

I had everything installed at global level (ESLint and babel-eslint) and started seeing the failed to load parser error in VS Code.

This statement from @r-i-c-h helped me resolve my issue.

Apparently, as of ESLint v6, while you can still technically use a global eslint installation, all plugins need to be "locally" installed [per project].

I simply installed the plugin at project level and everything started to work.

Hoping that this helps others as well.

[UncleClapton]

@dbaeumer it's public on npm, yes. @fuelrats/eslint-config or @fuelrats/eslint-config-react.

What @r-i-c-h suggested doesn't reflect my own testing unfortunately, so this is still an issue I'm having. I have always preferred an all local install over global. Makes for less version conflicts across projects.

I have a few ideas of what to try next. I'll update if I get a solid answer.

EDIT:
Wow my bad at misunderstanding you were talking about the github repo @dbaeumer. The correct link is https://github.com/fuelrats/eslint-config-fuelrats. Suppose this is what I deserve for attempting to type it in manually. 🤣

[dbaeumer]

@UncleClapton does the repository still show the problem of loading ESLint ?

[chaitanyapotti]

I face the same issue. The issue started when i upgraded to eslint 6 and disappears when downgraded to 5.
Repo linked here

[UncleClapton]

@dbaeumer it does.

After some further digging I think I finally found a culprit, however I'm not sure if this is the cause or just another side-effect of the changes in ESLint v6.

I found that in my specific case, this error was caused by the project not being vscode's workspace root. Whenever I load one of the individual config projects into vscode, everything resolves fine. When I load the repository root, however, both projects fail to load their plugins. This is despite the extension's ESLint server loading ESLint via each project's respective node_modules directory.

I was able to confirm that plugins will only load from the workspace root by copying the node_modules from one of the projects into it. Everything loads fine as long as the node_modules directory in the workspace root contains the plugins that a config defines.

I also just attempted to update one the projects using this config, and everything is working for that project on ESLint v6.

TL;DR: ESLint v6 broke the ability to have multiple projects in a workspace. Would this be fixable from this extension?

[akphi]

@dbaeumer it does.

After some further digging I think I finally found a culprit, however I'm not sure if this is the cause or just another side-effect of the changes in ESLint v6.

I found that in my specific case, this error was caused by the project not being vscode's workspace root. Whenever I load one of the individual config projects into vscode, everything resolves fine. When I load the repository root, however, both projects fail to load their plugins. This is despite the extension's ESLint server loading ESLint via each project's respective node_modules directory.

I was able to confirm that plugins will only load from the workspace root by copying the node_modules from one of the projects into it. Everything loads fine as long as the node_modules directory in the workspace root contains the plugins that a config defines.

I also just attempted to update one the projects using this config, and everything is working for that project on ESLint v6.

TL;DR: ESLint v6 broke the ability to have multiple projects in a workspace. Would this be fixable from this extension?

I agree with @UncleClapton, I have something like this

-- projectA
-- projectB (JS and has ESLint setup)

If I open projectB as the root in VSCode, the plugin works fine, but if I open parentProject, I will see the error

I also tried to downgrade to ESLint 5 and the situation is the same.

[dbaeumer]

@blacksteed232 do you have an example project I can clone that demos this?

[chaitanyapotti]

@dbaeumer Here is the project. you can demo the behaviour in this

[dbaeumer]

@chaitanyapotti your problem seems different. Since you have relative paths in your config you need to tell the ESLint extension where the ESLint working directory is. I got your example working using:

  "eslint.workingDirectories": [
    { "directory": "./app", "changeProcessCWD": true }
  ]

It also works if you open the app directory as a folder.

And the command line has the same problem when executed from the root folder:

eslint\torus-website> .\app\node_modules\.bin\eslint.cmd .\app\src\controllers\AccountTracker.js

Oops! Something went wrong! :(

ESLint: 6.0.1.

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "C:\Users\dirkb\Projects\mseng\VSCode\Playgrounds\bugs\eslint\torus-website".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in "app\.eslintrc.json".

If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.

[UncleClapton]

@dbaeumer Thanks for pointing out eslint.workingDirectories. This fixed my issues. thanks!

[chaitanyapotti]

@dbaeumer that fixed it for me. Thanks

[akphi]

@dbaeumer Thank you eslint.workingDirectories works for me

[CodingDive]

Unfortunately, this did not fix it for me using lerna + yarn workspace monorepository.

My structure looks like this

--packages
---- craApp (with eslintrc.json) 
---- craDesignSystem (with eslintrc.json)
---- server (with eslintrc.json)

The VSCode ESLint output always shows an error like the following

[Info  - 10:21:29 PM] ESLint library loaded from: root\node_modules\eslint\lib\api.js
[Error - 10:21:29 PM] Cannot find module 'eslint-config-react-app' Referenced from: root\packages\craApp\.eslintrc.json

Issue shows up even with following yarn workspace configuration inside the root package.json. Here I try to prevent the hoisting of eslint-config-react-app into the root folder but even after cleaning all of node_modules and running lerna bootstrap anew, it still seems to install react-scripts and the eslint plugins into the node_modules of root.

"workspaces": {
  "packages": [
    "packages/**"
  ],
  "nohoist": [
    "**/react-scripts/**"
  ]
]

It doesn't matter if I explicitly install eslint-plugin-react-app, extend it through the package.json of the packages, or specify extends via my custom eslintrc.json configuration.

The problem seems to be that it's always installing eslint to the root node_modules folder (I also tried nohoisting eslint to no avail) and when the eslint configs of my packages reference a plugin, ESLint fails to load it since it doesn't know about the root package and looks inside the mostly empty node_modules of e.g craApp.

On top of @dbaeumer solution of specifying eslint.workingDirectories (see https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-508687311), is there a way to point eslint to a fallback (in my case root) directory that may contain the plugins it can't find?

Let me know if you want me to create a new issue in this, create-react-app, yarn or lerna repository but at this point I'm kind of lost on where to find a solution to my problem.

[CodingDive]

The fix for the issue I described above was to install eslint-config-react-app into the package.json of the root, then set a yarn resolution to make sure it doesn't install a newer version of babel-eslint.

"resolutions": {
  "babel-eslint": "10.0.1"
},

[johnpyp]

Before the update it seems like "monorepo" style directories worked without the need to specify nested eslint working directories. Is it possible to implicitly detect them (like before) rather than having to explicitly specify them?

[dbaeumer]

@johnpyp I see your point but the underlying cause of this is that ESLint 6.0 changed the way how they resolve / load plugins. There was no change in the extension.

Detecting the folders in a monrepro might not be easy. I opened https://github.com/microsoft/vscode-eslint/issues/708 since I would like to keep this is focused on the loading issue.

A PR implementing https://github.com/microsoft/vscode-eslint/issues/708 is welcome.

[davidysoards]

the "eslint.workingDirectories" approach OR opening vscode from a terminal window inside the project root folder with "code ." work for me, but I hope this issue gets fixed. thanks @dbaeumer

[dbaeumer]

@davidysoards are you saying this makes a different for you whether you open code from a terminal or not. If so can you provide me with a GitHub repository I can clone that demos this.

As I was trying to explain here this is nothing I can fix easily since it is caused by ESLint 6.0 not supporting plug-in loading in the same way. As I was showing this even happend when executing things form the terminal.

All we can do is to infer working directories as described in #708 but it will still require user interaction since the inference could be simply wrong.

[davidysoards]

@dbaeumer I was just stating the easiest way I know to "open the app directory as a folder."
I used the gatsby-starter-default and added an .eslintrc.json file to the root folder set to

{
  "extends": "react-app"
}

and the extension is working as expected. Thanks again for your help.

[dkadrios]

I'm having the same issues with eslint 6, and to add a new wrinkle, now when reverting back to eslint 5.16.0, prettier is throwing Cannot find module './utils/ast-utils'

I've tried nuking node_modules (even yarn.lock) but the issue persists. Seems like once you install eslint 6, something in vsc's integration gets permanently borked.

Anyone else having issues reverting to eslint 5? Any workarounds?

[CodingDive]

Try npms timetravel feature to make sure you don't get any dependencies relying on eslint 6+.
npm i --before 2019-04-01

On Wed, Jul 10, 2019, 01:27 Darin Kadrioski [e-mail]
wrote:

Anyone else having issues reverting to eslint 5? Any workarounds?

[dkadrios]

I confirmed that the only package change was eslint 5 to 6 and then back to 5.

What ultimately resolved this for me was to reinstall vscode

[dbaeumer]

What ultimately resolved this for me was to reinstall vscode

This sounds really strange since the VS Code installation should have no impact on this

[manuelbieh]

@dkadrios - same issue here. I upgraded to ESLint 6 and downgraded back to 5 and still got this ast-utils error. What helped for me (instead of uninstalling VSCode) was to revert back to ESLint 5 in the project folder and then rename[!] the project folder and restart VSCode. After I reverted to ESLint 5 and renamed the folder, the error disappeared. That's still ugly but better than having to reinstall VSCode completely.

[dkadrios]

I didn't think to rename the project folder -- good to hear that that works. Much simpler.

Reinstalling was actually trivial thanks to the Settings Sync extension which I highly recommend using, especially if you use vscode on multiple machines. https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Once I had the new binary, I just needed to install that one extension and it then reimported all my other settings, extensions and snippets.

[dancherb]

@manuelbieh Thanks, this helped me as well. I'd wiped any trace of the new eslint after creating a new react-native project on the latest react-native version, nuked node_modules and wiped package-lock.json multiple times, but was still getting the error - renaming and restarting sorted it out.

[ivo-urbanek]

After update to Eslint v6.x:
[Info - 9:03:19 AM] ESLint server stopped.
[Info - 9:03:20 AM] ESLint server running in node v10.2.0
[Info - 9:03:20 AM] ESLint server is running.
[Info - 9:03:21 AM] ESLint library loaded from: /srv/dev/users/app/node_modules/eslint/lib/api.js
[Error - 9:03:21 AM]
Failed to load plugin 'react' declared in 'users/app/.eslintrc': Cannot find module 'eslint-plugin-react'
Require stack:
- /srv/dev/__placeholder__.js
Referenced from: /srv/dev/users/app/.eslintrc
Happened while validating /srv/dev/users/app/src/components/NewUser.jsx
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure 'eslint-plugin-react' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-react' isn't installed correctly.

Consider running eslint --debug /srv/dev/users/app/src/components/NewUser.jsx from a terminal to obtain a trace about the configuration files used.

Updated this packages:
"eslint": "^6.0.1",
"eslint-config-airbnb": "^17.1.1",
"eslint-loader": "^2.2.1",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-jest": "^22.7.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.2",

[cassv24]

Same issue here, 🐧Ubuntu 19.04, "eslint": "^6.0.1"

[Info  - 9:39:39 PM] ESLint server stopped.
[Info  - 9:39:39 PM] ESLint server running in node v10.11.0
[Info  - 9:39:39 PM] ESLint server is running.
[Info  - 9:39:40 PM] ESLint library loaded from: ~/myproject/server/node_modules/eslint/lib/api.js
[Error - 9:40:35 PM] 
Failed to load plugin 'import' declared in 'server/.eslintrc.js': Cannot find module 'eslint-plugin-import'
Require stack:
- ~/myproject/__placeholder__.js
Referenced from: ~/myproject/server/.eslintrc.js
Happened while validating ~/myproject/server/src/server.js
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure 'eslint-plugin-import' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-import' isn't installed correctly.

Consider running eslint --debug ~/myproject/server/src/server.js from a terminal to obtain a trace about the configuration files used.

[Tzahile]

I had a this error after upgrading to Eslint 6 version, using prettier:

Failed to load plugin 'vue' declared in 'CLIOptions'c:\Projects\PATH\store.js:: Cannot find module 'eslint-plugin-vue'
Require stack:
- C:\Program Files\Microsoft VS Code\__placeholder__.js

I was getting the same error for react-hooks config, and unchecking the VSCode option Use 'prettier-tslint' instead of 'prettier' dissipated the error for me.

luckily, @Luxiyalu suggestion solved it for me!
(with eslint option - Use 'prettier-eslint' instead of 'prettier')

[SMerdzhanov]

Hey guys, I'm very late for the party... But I've been having pretty similar headaches for a couple of days and decided to share what worked for me.

Findings

Symptoms:

• ESLint works from the CLI
• ESLint does not work within VSCode
• ESLint >= v6
• ESLint in VSCode throws random load plugin failures and suggests installing the "missing" dependency

The issue seems to be a combination of two updates in the realm of linting.

A) ESLint extension for VSCode has option eslint.workingDirectories

B) ESLint v6 introduces - Plugins and shareable configs are no longer affected by ESLint’s location

Solution that worked for me

TL;DR if your ESLint configs are in subfolders you should set eslint.workingDirectories in your .vscode/settings.json, because otherwise VSCode's ESLint plugin fails to find the plugins in the project root's node_modules!

Project structure:

_Note that root/ does not have any linting configuration!_

root/
-- backend/
---- .eslintrc
-- frontend/
---- .eslintrc

root/.vscode/settings.json

...
"eslint.workingDirectories": ["./backend", "./frontend"],
...

root/frontend/.eslintrc

{
  "root": true,
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

root/frontend/package.json

...
"devDependencies": {
    "eslint": "^6.0.1",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-config-prettier": "^6.0.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.14.2",
    "prettier": "^1.18.2"
...
  }

[feugy]

Horray @SMerdzhanov, you just saved my life.

In my case, I had to specify changeProcessCWD, because my subfolders have different plugins and configurations.
I'm using a workspace, but this has _no effect on the working directories_, so don't be concerned about it.

Project structure:

root/
--workspaceFolder A/
---- app/
------ api/
------ ui/
---- e2e/
---- mock/

root/.vscode/settings.json:

    "eslint.workingDirectories": [
        { "directory": "./app/api", "changeProcessCWD": true },
        { "directory": "./app/ui", "changeProcessCWD": true },
        { "directory": "./e2e", "changeProcessCWD": true },
        { "directory": "./mock", "changeProcessCWD": true }
    ]

[cassv24]

Hey guys, I'm very late for the party... But I've been having pretty similar headaches for a couple of days and decided to share what worked for me.

Findings

Symptoms:

• ESLint works from the CLI
• ESLint does not work within VSCode
• ESLint >= v6
• ESLint in VSCode throws random load plugin failures and suggests installing the "missing" dependency

The issue seems to be a combination of two updates in the realm of linting.

A) ESLint extension for VSCode has option eslint.workingDirectories

B) ESLint v6 introduces - Plugins and shareable configs are no longer affected by ESLint’s location

Solution that worked for me

TL;DR if your ESLint configs are in subfolders you should set eslint.workingDirectories in your .vscode/settings.json, because otherwise VSCode's ESLint plugin fails to find the plugins in the project root's node_modules!

Project structure:

_Note that root/ does not have any linting configuration!_

root/
-- backend/
---- .eslintrc
-- frontend/
---- .eslintrc

root/.vscode/settings.json

...
"eslint.workingDirectories": ["./backend", "./frontend"],
...

root/frontend/.eslintrc

{
  "root": true,
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

root/frontend/package.json

...
"devDependencies": {
    "eslint": "^6.0.1",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-config-prettier": "^6.0.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.14.2",
    "prettier": "^1.18.2"
...
  }

From what I see in the docs eslint.workingDirectories, _this is not a bug_, but the way it's supposed to work when you have a root structure as fallow:

root/
  client/
    .eslintrc.json
    client.js
  server/
    .eslintignore
    .eslintrc.json
    server.js

In your _settings.json_

"eslint.workingDirectories": [
    "./client", "./server"
  ]

Note: You don't need to add any "root": truein your .eslintrc.js for this to work.

When you think about it, it does makes sense since the plugin sees the whole project structure not only your working folder and like in the example you will have more than one .eslintrc.js config file in it.

Thanks you @SMerdzhanov, this does fix the issue.

[dvonlehman]

In case it helps anyone, I solved the Cannot find module './utils/ast-utils' error when running Prettier in vscode by setting "prettier.eslintIntegration": false.

[johnpapa]

I also solved this in a vscode node extension app (Peacock) by setting "prettier.eslintIntegration": false.

to be clear - prettier still formats for me.

thanks @dvonlehman

[dinidu-bhathiya]

We fix this issue by changing

"editor.formatOnSave": false,
and
"eslint.autoFixOnSave": true.

With this eslint extension is going to do the correcting lint issue on saving the code and there is no need to use the prettier extension at all.

[JuanMartinHta]

I was getting the same error for react-hooks config, and unchecking the VSCode option Use 'prettier-tslint' instead of 'prettier' dissipated the error for me.

I had a this error after upgrading to Eslint 6 version, using prettier. Thats work for my.

[julianlam]

It seems by an large the only people affected this bug use VSCode by opening a folder into the workspace that contains multiple subfolders, and eslint is only installed on those subfolders, but specifically not the workspace root.

Seemingly vscode-eslint instructs ESLint to look only at the workspace root for various eslint plugins, and now ESLint does not search subfolders for them like it used to.

In my case, I worked around this by executing yarn add eslint && yarn add eslint-plugin-import && yarn add eslint-config-airbnb-base into the workspace root, even though it is only a folder containing my projects. However this means the eslint versions installed in my subfolders won't be executed, which seems like a bug on vscode-eslint's part.

Just hypothesizing here, but perhaps vscode-eslint should search for a node_modules/ folder relative to the currently opened file and assume that as the current context?

[mkkoh]

What worked for me was to downgrade to version 5 of ESLint. Global install here.

[davidysoards]

With this eslint extension is going to do the correcting lint issue on saving the code and there is no need to use the prettier extension at all.

This is def a workaround though and NOT a solution because what makes Prettier great is that it IS opinionated. Configuring ESLint for formatting (different than code correction) is a pain and a huge time suck.

[ljharb]

@davidysoards it takes 2-3 config lines - one to enable the prettier plugin, and another to extend the prettier config (which disables all conflicting formatting rules).

Prettier should only ever be run through eslint, never directly.

[davidysoards]

@ljharb I thought he was suggesting not using prettier at all. But I also prefer to use prettier separately because I use it to format html, css, and scss as well.

[woodreamz]

Same issue for me. I tried a lot of things but the only solution for me was to downgrade to eslint 5.6.0. I will wait for a fix.

[danisal]

I have the same problem... Is it solved?

[marksamman]

Has this been reported to ESLint since ESLint 6.0 is what broke it? Perhaps they could adjust the plugin loading system to accommodate the extension.

[al1khavari]

same problem for me in eslint version 6.x.x but everythings fine in eslint version 5.0.0

[NaciAkce]

Horray @SMerdzhanov, you just saved my life.

In my case, I had to specify changeProcessCWD, because my subfolders have different plugins and configurations.
I'm using a workspace, but this has _no effect on the working directories_, so don't be concerned about it.

Project structure:

root/
--workspaceFolder A/
---- app/
------ api/
------ ui/
---- e2e/
---- mock/

root/.vscode/settings.json:

    "eslint.workingDirectories": [
        { "directory": "./app/api", "changeProcessCWD": true },
        { "directory": "./app/ui", "changeProcessCWD": true },
        { "directory": "./e2e", "changeProcessCWD": true },
        { "directory": "./mock", "changeProcessCWD": true }
    ]

best solution in my case. Without changing any configuration except this

{ "eslint.workingDirectories": [ { "directory": "./src", "changeProcessCWD": true } ] }

[bohmanart]

The eslint.workingDirectories fix worked for me too, to get eslint working again but prettier still throws this error.

Failed to load plugin 'jsx-a11y' declared in 'CLIOptions':: Cannot find module 'eslint-plugin-jsx-a11y'
Require stack:
- /__placeholder__.js

[Jonathan0wh]

In case it helps anyone, I solved the Cannot find module './utils/ast-utils' error when running Prettier in vscode by setting "prettier.eslintIntegration": false.

Thanks! You saved my life! Got the same issue after upgrading from Eslint 5 to 6. I guess this is a problem with prettier-eslint with Eslint 6.

This setting could also be changed in VSCode Settings (but watch out if it is global or workspace setting): if you got this error, you could search for Prettier keyword for the VSCode Prettier Extension in VSCode settings, and turn off Prettier: Eslint Integration, because it instructs the VSCode Prettier Extension to use prettier-eslint instead of prettier itself.

I already had prettier-eslint installed both globally and locally, but still got this problem. There is already an issue here about the compatibility between prettier-eslint and Eslint 6.

There is a similar config option Prettier: Tslint Integration for those using Typescript. But I am not sure if prettier-tslint also has this issue. Anyway, if you had a similar problem when using Typescript, maybe you could try the solution above.

[mzedeler]

I had exactly the same symptoms, even when I just install ESLint from scratch in a simple project with a single configuration. It turned out that I had to add "root": true to the configuration that was otherwise generated automatically by eslint --init.

[dbaeumer]

Can someone provide me with a small GitHub repository I can clone that demos the prettier problem. Then I can have a look whether I could work around it.

[manuelbieh]

It's not exactly "small" but it's still easy to reproduce:

git clone https://github.com/manuelbieh/react-ssr-setup
cd react-ssr-setup
yarn add eslint@^6.0.0 eslint-config-prettier@^6.0.0

Open VSCode with eslint and eslint-prettier integration enabled and you should get the error in the Output panel of VSCode.

// edit:
I already tried to debug it but since I have absolutely no idea how to debug VSCode extensions, I gave up after ~30 mins.

[dbaeumer]

@manuelbieh I cloned the repository and followed your steps but can't make it fail. Can you provide me exactly which file to open and what to do inside the file.

[manuelbieh]

Ah, sorry. This only happens when you have "prettier.eslintIntegration": true,

(… and you need to install the Prettier extension of course 😉)

[dbaeumer]

Format on Save still works but Format Documet gives me this in the Prettier channel.

[jkmuka]

After installing 1.9.0, I open VS Code and get this error. I am not using prettier and the config file is present in the path it is trying to load it from.

ESLint: Failed to load config "defaults/configurations/eslint" to extend from. Referenced from: ...eslintrc. Please see the 'ESLint' output channel for details.

{
  /* See all the pre-defined configs here: https://www.npmjs.com/package/eslint-config-defaults */
  "extends": "defaults/configurations/eslint",
  "parser": "babel-eslint",
  "ecmaFeatures": {
    "jsx": true
  },
  "plugins": [
    "react",
    "import"
  ],
  "env": {
    "amd": true,
    "browser": true,
    "jquery": true,
    "node": true,
    "es6": true,
    "worker": true
  },
  "rules": {

    "eqeqeq": 2,
    "comma-dangle": 1,
    "no-console": 0,
    "no-debugger": 1,
    "no-extra-semi": 1,
    "no-extra-parens": 1,
    "no-irregular-whitespace": 0,
    "no-undef": 0,
    "no-unused-vars": 0,
    "semi": 1,
    "semi-spacing": 1,
    "valid-jsdoc": [
      2,
      { "requireReturn": false }
    ],

    "import/extensions": 1,

    "react/display-name": 2,
    "react/forbid-prop-types": 1,
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 1,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": 1,
    "react/jsx-max-props-per-line": 0,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 0,
    "react/jsx-no-undef": 1,
    "react/sort-prop-types": 1,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 0,
    "react/no-unknown-property": 1,
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/jsx-wrap-multilines": 1
  }
}

[5310]

In my case, I have ESLint, etc globally installed via PNPM.

Up until recently, it all used to work fine, but starting on this new project I noticed it started throwing ESLint: Failed to load config "standard" to extend from. Referenced from: /home/scio/.config/Code/User/eslintrc. Please see the 'ESLint' output channel for details.

Naturally, I have all the modules installed just fine, and can also run eslint --debug just fine. It just never works in VS Code.

However, I noticed one thing that I didn't expect. The project I'm in has a local .eslintrc (even though it is identical to my global config) and the extension never picks it up. I even tried manually setting the workspace folder, but nothing.

However, as soon as I set the config file explicitly under this workspace with "eslint.options": { "configFile": "./.eslintrc" } it works again. It even uses the locally installed _NPM_ ESLint dev-dependencies instead of the globally installed _PNPM_ ones, even though I have the global package manager for the extension set to PNPM.

Projects without any local ESLint config (or even a package.json) still use the global config ofc, and the outputs show the global PNPM install of ESLint being used by path. Still can't load any of the modules through the extension of course. And yet, it used to work without any changes to either my system or my packages or even these other projects just fine a few weeks ago (afaict.) (Edit: My bad, I thought I hadn't ran my updates. But it did actually work with ESLint 5.x, and does _not_ work with ESLint 6.x, even with all the other packages at the latest.)

[fedorovsky]

https://github.com/fedorovsky/npm-package-js/tree/eslint
Branch ----> eslint

[alexbleggi]

I was having this issue using eslint-config-airbnb-base, so I installed it using npx install-peerdeps --dev eslint-config-airbnb-base, and it worked...

In my case, this issue was due to a ESLint version conflict with eslint-config-airbnb-base, the peerdeps lowed the ESLint version to 5.3...

[fedorovsky]

Thank. A new version was released in which everything worked.