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

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

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.

@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?

@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

parentProject
-- 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.

For whom it might help, the only thing that has worked in my case was

"eslint.workingDirectories": [
    { "mode": "auto" }
],

This issue has become a catchall thread for a number of different problems that can trigger the same error. A few solutions are buried in here, and my case involved two at the same time. I hope the following summary helps folks:

Least invasive

From @jeffschwartz 's comment npm audit fix seems the least invasive, worth a try. If it works for you, great!

Subdirectories

If your workspace has multiple subdirectories with eslintrc.* a level or so down like this:

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

Then you need to specifically tell vscode-eslint to look in these subdirectories by setting the option eslint.workingDirectories. You will likely want this to sit in your workplaces’ .vscode/settings.json file, like this:

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

Look to the comments by @SMerdzhanov here, and @cassv24 here for more information. Or simply search “eslint.workingDirectories” on this page for all the different comments where it comes up (lots).

Upgrading to eslint@6* and Prettier integrations

In short, you should now be using prettier-eslint, as a devDependancy of your project with the VS Code Prettier extension.

The VS Code Prettier extention had the following settings option: "prettier.eslintIntegration": true which is now deprecated.

Remove or set to false the option "prettier.eslintIntegration": true in your user settings.json and in your workspace’s .vscode/settings.json. You can replace it with prettier-eslint’s equivalent option "prettier-eslint.eslintIntegration": true.

Hat tip goes to @2color and his comment here

Incidentally prettier.tslintIntegration, and prettier.stylelintIntegration have also been deprecated. If you use either of these Prettier plugins, you may encounter similar issues.

Try changing "prettier.eslintIntegration": true to "prettier-eslint.eslintIntegration": true in Settings (JSON) for VS Code.

Fixed the problems that I was having after upgrading to ESLint 6.x.

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"
...
  }

@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.

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.

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'

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.

I’m guessing a lot of people are seeing this as a result of upgrading their create-react-app projects which uses ESLint ^6.

Thanks to the comments in this thread, we solved the ESLint plugins not loading issue by adding the following to the vscode workspace settings.json

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

Note that the recommended install procedure for create-react-app is to use a sub directory. For our project we called the sub directory app. E.g.

npx create-react-app app
cd app
npm start

Of course as part of the initial setup we installed the vscode extension ESLint and ran .\node_modules\.bin\eslint --init

Oh, and for react projects you will need to add a react plugin preset to .eslintrc.json E.g.

"extends": [
    "standard",
    "plugin:react/recommended"
  ]

On a side note, while reviewing all the settings in vscode we re-ran .\node_modules\.bin\eslint --init and tested the setting eslint.autoFixOnSave. At that point we decided to remove the Prettier extension. The results so far are good and it makes onboarding developers that tiny bit easier.

For reference, our workspace settings.json file now looks like this (Note disabling formatOnSave for javascript because it conflicts with eslint.autoFixOnSave)

{
  "eslint.workingDirectories": [{ "directory": "./app", "changeProcessCWD": true }],
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "editor.formatOnSaveTimeout": 4000
}

So all these workaround and fixes are nice, but is this ever going to be fixed in a plug-and-play way?

One of the amazing things about this plugin with eslint@5 is that it just always works automagically, no matter your application/workspace layout. That’s a great experience. The fact that this is no longer something I don’t have to think about bums me out 😦

In my case, I had the following folder structure:

front/
back/
shared/

I just had to add a .vscode/settings.json at the root of the project, with the following content:

{
    "eslint.workingDirectories": ["./front", "./back", "./shared"]
}

This removes the mentioned error (for reference, I’m using eslint v6.7.2). Not entirely happy with this though, as I have to manually add the projects to this setting file.

Some recommendation to better track down what is going wrong:

• first run eslint from the terminal out of the workspace folder you have open. That means if our workspace folder is under /users/dirkb/myProject run eslint in the terminal with the cwd set to /users/dirkb/myProject.
• ensure to use the local eslint version if installed by using node_modules/.bin/eslint

If this run without problems provide me with a GitHub repository I can clone that demos the behaviour so that I can investigate

If it fails and the workspace folder has project folders (e.g. a client and server folder) or is some sort of mono repository try to run eslint from within the project folders. If this works setup the VS Code eslint.workingDirectories setting as described here https://github.com/microsoft/vscode-eslint. Best is to use the format with the changeProcessCWD property. Something like

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

If running eslint even fails in the project folder (e.g. client, server) then investigate if this is an eslint setup issue (missing plugin, wrong configuration, …). It is very likely not an issue with the ESLint extension.

I too have a monorepo and I had one hell of a time trying to figure out where to put the settings.json file and how to format it. So to hopefully save some people the trouble here’s my setup…

settings.json

{
  "eslint.workingDirectories": [
    "./client",
  ]
}

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 }
    ]

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.

Is @dbaeumer’s post here about setting eslint.workingDirectories supposed to be the ultimate solution, or just a work-around until the issue can be resolved?

As an ultimate solution, it doesn’t seem like the end of the world, but it does seem non-ideal, given it’s one more thing to have to remember to manually do when setting up a workspace. The fact that we didn’t previously need to do this makes it feel like a bug, from my perspective … but I’m unclear if that’s how the maintainers are viewing it.

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

This issue has become a catchall thread for a number of different problems that can trigger the same error. A few solutions are buried in here, and my case involved two at the same time. I hope the following summary helps folks:

Least invasive

From @jeffschwartz 's comment npm audit fix seems the least invasive, worth a try. If it works for you, great!

Subdirectories

If your workspace has multiple subdirectories with eslintrc.* a level or so down like this:

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

Then you need to specifically tell vscode-eslint to look in these subdirectories by setting the option eslint.workingDirectories. You will likely want this to sit in your workplaces’ .vscode/settings.json file, like this:

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

Look to the comments by @SMerdzhanov here, and @cassv24 here for more information. Or simply search “eslint.workingDirectories” on this page for all the different comments where it comes up (lots).

Upgrading to eslint@6* and Prettier integrations

In short, you should now be using prettier-eslint, as a devDependancy of your project with the VS Code Prettier extension.

The VS Code Prettier extention had the following settings option: "prettier.eslintIntegration": true which is now deprecated.

Remove or set to false the option "prettier.eslintIntegration": true in your user settings.json and in your workspace’s .vscode/settings.json. You can replace it with prettier-eslint’s equivalent option "prettier-eslint.eslintIntegration": true.

Hat tip goes to @2color and his comment here

Incidentally prettier.tslintIntegration, and prettier.stylelintIntegration have also been deprecated. If you use either of these Prettier plugins, you may encounter similar issues.

@orionrush Wah thanks awesome. Add eslint.workingDirectories in the settings.json work for me. Running well in node version 12.

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

Memo for monorepo players:

1. install all modules globally, npm i -g ...
2. add the option to force vscode-eslint to use global path (npm list -g | head -n 1) instead the local path (always 404 😂 )

// settings.json
{
    "eslint.options": {
        "resolvePluginsRelativeTo": "/usr/local/lib/node_modules"
    }
}

Refs:

• https://eslint.org/docs/user-guide/migrating-to-6.0.0#-plugins-and-shareable-configs-are-no-longer-affected-by-eslints-location
• https://eslint.org/docs/developer-guide/nodejs-api#cliengine

I am currently working ontwo changes for the next 2.0 version of the extension:

• glob support for eslint.workingDirectories
• making changing the process cwd the default since it majorly helps with eslint 6.0.

I also looked into detecting project folders but I couldn’t come up with a good solution which wouldn’t require prompting for review. If someone has ideas I am happy to consider them.

@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.

Honestly, this is kinda ridiculous. In the last 2 days I’ve lost about 3 hours fighting it, reinstalling my dependencies, deleting them one by one, nothing helped. Fortunately the workaround (open Code in the folder with .eslintrc.json) works fine.

Works with locally installed eslint 5.16.0; Doesn’t work with locally installed eslint >= 6;

Failed to load plugin 'react' declared in 'linters/.eslintrc': Cannot find module 'eslint-plugin-react'
Require stack:
- /path/to/file/__placeholder__.js
Referenced from: /path/to/file/.eslintrc
Happened while validating /path/to/file/index.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-react' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-react' isn't installed correctly.

Consider running eslint --debug /path/to/file/index.js from a terminal to obtain a trace about the configuration files used.

I released version 2.0.4 of the extension which should improve this but it will still require some configuration work if the workspace is not a single project (e.g. the workspace root doesn’t contain the package.json and .eslintrc file). The major reason why this can’t be fixed in all cases is that ESLint itself (the npm module) is very sensitive to the current working directory for the module and plugin resolution, the .eslintrc and the .eslintignore file. Choosen an incorrect directory might make one of those fail. The new version therefore allows the following working directory settings (from the readme):

• { "mode": "location" } (@since 2.0.0): instructs ESLint to uses the workspace folder location or the file location (if no workspace folder is open) as the working directory. This is the default and is the same strategy as used in older versions of the ESLint extension (1.9.x versions).
• { "mode": "auto" } (@since 2.0.0): instructs ESLint to infer a working directory based on the location of package.json, .eslintignore and .eslintrc* files. This might work in many cases but can lead to unexpected results as well.
• string[]: an array of working directories to use. Consider the following directory layout:

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

Then using the setting:

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

will validate files inside the server directory with the server directory as the current eslint working directory. Same for files in the client directory. The ESLint extension will also change the process’s working directory to the provided directories. If this is not wanted a literal with the !cwd property can be used (e.g. { "directory: "./client", "!cwd": true }). This will use the client directory as the ESLint working directory but will not change the process`s working directory.

• { "pattern": glob pattern } (@since 2.0.0): Allows to specify a pattern to detect the working directory. This is basically a short cut for listing every directory. If you have a mono repository with all your projects being below a packages folder you can use { "pattern": "./packages/*/" } to make all these folders working directories.

In most cases { "mode": "auto" } or the pattern setting will be your friend now.

In case it helps anyone searching, the following (based on previous comments) fixed it for me in a lerna monorepo. ESLint is installed in the root project, and its config file is there too.

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

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

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

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

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?

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

@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

@MarceloPrado the next version will improve this. I do want to point out that eslint in the terminal fails as well in this setup if not executed from one of the directories front, back and shared.

@mikeyamato try

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

@sshmyg Hope I’m not overstepping, but as far as I can tell using the option eslint.workingDirectories documented in the project Readme file is the recommended solution to get this extension working with ESLint ^6 as discussed in this very long thread, with highlights here, here and here. I’ve also added a few notes in this thread in relation to getting a create-react-app project working that I think is the correct way to configure this VSCode extension for that use-case. Hope this helps.

Setting the working directories helped. Otherwise, I can confirm that eslint fails to load plugins when workspace root doesn’t contain node_modules.

I have xxx/gateway and xxx/gui in my repo (xxx), and I put the following config in xxx/.vscode/settings.json:

{
  "eslint.workingDirectories": [
    {
      "directory": "GUI",
      "changeProcessCWD": true
    },
    {
      "directory": "gateway",
      "changeProcessCWD": true
    }
  ]
}

Basically it works for every ts and tsx file inside xxx/gateway/src and xxx/gui/src, but when I tried to run prettier-eslint format in xxx/gui/features/support/customFormatter.js, it said:

Failed to load plugin 'import' declared in 'CLIOptions'xxx/GUI/features/support/customFormatter.js:: Cannot find module 'eslint-plugin-import'
Require stack:
- /__placeholder__.js

And the most interesting thing is that, when I change the file name from customFormatter.js to customFormatter.ts, it just formats without error.

So, weirdly, I downgraded to eslint@5.16, and now I get this exact same error for the downgraded version too…

And, setting working directory didn’t work either. Here is my .settings.json

{
    "json.schemas": [
        {
            "fileMatch": ["cosmos.config.json"],
            "url": "http://json.schemastore.org/cosmos-config"
        }
    ],
    "eslint.workingDirectories": ["./", "./src", "./example"]
}

All files inside src are .ts|.tsx and all files inside example are .js files.

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 } ] }

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.

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": true in 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.

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?

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.

With the VS code 1.41.0 this issue should be resolved for most people. […] I was able to verify that Eslint now works in my projects.

With plugins? It still fails on my machine if I don’t configure eslint.workingDirectories.

ESLint Output-Channel:

[Info  - 12:08:55 PM] ESLint server stopped.
[Info  - 12:08:55 PM] ESLint server running in node v12.4.0
[Info  - 12:08:55 PM] ESLint server is running.
[Info  - 12:08:56 PM] ESLint library loaded from: /home/simon/Desktop/dev/work/asm-server/node_modules/eslint/lib/api.js
[Error - 12:08:56 PM] 
Failed to load plugin 'prettier' declared in 'asm-server/.eslintrc.json': Cannot find module 'eslint-plugin-prettier'
Require stack:
- /home/simon/Desktop/dev/work/__placeholder__.js
Happened while validating /home/simon/Desktop/dev/work/asm-server/src/app.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-prettier' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-prettier' isn't installed correctly.

Consider running eslint --debug /home/simon/Desktop/dev/work/asm-server/src/app.js from a terminal to obtain a trace about the configuration files used.

eslint --debug output:

Oops! Something went wrong! :(

ESLint: 6.7.2.

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

(The package "eslint-plugin-prettier" was not found when loaded as a Node module from the directory "/home/simon/Desktop/dev/work".)

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

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

The plugin "eslint-plugin-prettier" was referenced from the config file in "asm-server/.eslintrc.json".

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

Version: 1.41.0 Commit: 9579eda04fdb3a9bba2750f15193e5fafe16b959 Date: 2019-12-11T18:32:17.711Z Electron: 6.1.5 Chrome: 76.0.3809.146 Node.js: 12.4.0 V8: 7.6.303.31-electron.0 OS: Linux x64 5.3.0-24-generic

There is now a new Insider version of the extension that should help improve this. Please see https://github.com/microsoft/vscode-eslint/issues/815 on how to beta test it. Please be aware that this is a bigger rewrite of some functionality so other things might break 😃

@Seefer please have a look at the eslint.workingDirectories settings which exactly serves the purpose of defining these project folder for eslint.

Unfortunately with Create React App setup, none of the suggestions worked either…

Thanks to @orionrush for all of the suggestions, but possibly because I am using CRA it changes something.

For all silly people like me, make sure the directory that is opened in VsCode is the one with .eslint config file.

Everything works, thanks again 👍

Hi guys, I had the same problem and I resolved following the steps here: https://github.com/prettier/prettier-vscode#vscode-eslint-and-tslint-integration

Try remove the eslint and tslint configs in settings.json to "eslint.autoFixOnSave": true and "tslint.autoFixOnSave": true

@viniarruda Thanks，It’s resolve my problem!

@orionrush thanks for providing this good summary.

Try changing "prettier.eslintIntegration": true to "prettier-eslint.eslintIntegration": true in Settings (JSON) for VS Code.

Fixed the problems that I was having after upgrading to ESLint 6.x.

This worked for me

@rhbecker actually standolne ESLint has the same issue. When you execute eslint in the terminal without changing into the right working directory the execution will fail with the same error as the extension does.

However I do see the fact that changing directories in a terminal is more natural then specifying working directories in a settings file. Although I have to say you always have to do this, the setting you set once 😃

I do have an item to detect working directories. See https://github.com/microsoft/vscode-eslint/issues/708. A PR to improve this is highly appreciated.

@StephenHaney That defeats the entire purpose of having a settings.json file. 😄

That file is meant to contain settings for the workspace, so that the workspace behaves exactly the same on every machine.

Agree with @rhbecker. Has this been reported to the ESLint maintainers since it was broken by ESLint 6? This used to work out of the box up until ESLint 5 and it’s bothersome to have to configure working directories for every VSCode workspace that uses ESLint. Could this plugin implement default logic for workingDirectories if it isn’t set, e.g. traverse the parent directories until it finds .eslintrc with root: true and use that as workingDirectory, or look for node_modules (npm root)?

Please follow the information from ‘hutch120’. In short:

• If you have got folder per project (inc. package.json and .eslintrc) and many projects inside one folder (e.g. ‘dev’), you can see described problem (eslint v6 failed).
• In this case create a new folder dev/.vscode
• Inside new folder create a file settings.json (dev/.vscode/settings.json)
• Finally write each folder name using react into workingDirectories directive like this:

"eslint.workingDirectories": [              
        "./template", // ... and other ones ...
    ]

Note: template is folder name with package.json having react dependency. Use you names! (- Save the file.)

• Use last versions - update packages: eslint v6.2.2+, configs like airbnb …
• Reload VS Code using [F1] -> write ‘Reload Window’ -> [Enter]

See also: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

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

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…

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
  }
}

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.

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

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 Thanks for pointing out eslint.workingDirectories. This fixed my issues. thanks!

@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. 🤣

So, there has been a LOT of activity since I posted this well received comment relating to a create-react-app setup.

Since that comment I’ve had to revisit my vscode settings.json again and update as follows:

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.codeActionsOnSaveTimeout": 4000
}

The reason for "editor.formatOnSave": false is that it will try to format the code but appears to conflict with source.fixAll and if you don’t include that line then the onsave event (re)formats the eslint-plugin-standard to something else.

Edit: If you use Typescript then also add a flag to stop built-in format on save for that.

my use case for this is I like to have some basic linting when I’m just messing around outside of any projects writing test JS in VS Code. Previously I had a global eslintrc in my home folder that had some basic rules enabled. The fact that this doesn’t work anymore has actually proven to be a pretty big loss for me

I just restarted VSCode after installed "eslint-plugin-vue" and everything works fine.

@CodingDive

Yes. The keywork is working directories. That’s why i choose using global! (too many directories need to set…)

The situation i met is: (https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-508580721 mentioned)

$ cd the-real-mono-with-all-projects
$ tree -d -L 1
.
├── monorepo1
├── monorepo2
├── project3
├── project4
├── ...
└── shared-config

23 directories

$ code .

And those should work:

• always open one vscode per project (Your suggestion)
• open the projects root folder with …
  • adding all projects to working directories
  • or forcing global (I prefer this)

@up9cloud

I’m using a monorepo and the prior solution of setting working directories worked fine for me. All my configs now live in local dependencies and the workspace settings of the project. No more global dependencies means that getting started is as easy as running npm install/yarn. 🚀

On Fri, Oct 18, 2019, 08:50 up9cloud notifications@github.com wrote:

Memo for monorepo players:

1. install all modules globally, npm i -g …
2. add the option to force vscode-eslint to use global path (npm list -g | head -n 1) instead the local path it should 200 but 404 😂 .

// settings.json

{

"eslint.options": {

    "resolvePluginsRelativeTo": "/usr/local/lib/node_modules"

}

}

Refs:

https://eslint.org/docs/user-guide/migrating-to-6.0.0#-plugins-and-shareable-configs-are-no-longer-affected-by-eslints-location

• https://eslint.org/docs/developer-guide/nodejs-api#cliengine

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/microsoft/vscode-eslint/issues/696?email_source=notifications&email_token=AG4BSR6LFHHX6QIIWGX6VALQPFMC7A5CNFSM4H3ID3MKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBS6OZY#issuecomment-543549287, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG4BSR7JCA7MHTQZSRMOGCDQPFMC7ANCNFSM4H3ID3MA .

Hi guys, I had the same problem and I resolved following the steps here: https://github.com/prettier/prettier-vscode#vscode-eslint-and-tslint-integration

Try remove the eslint and tslint configs in settings.json to "eslint.autoFixOnSave": true and "tslint.autoFixOnSave": true

I added ` “eslint.workingDirectories”: [“./dir-goes/here”] based on https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-524833673 and it resolved.

@afkatja Afaik, you need to do:

 "prettier-atom":
    formatOnSaveOptions:
      enabled: true
    prettierEslintOptions:
      prettierLast: true
    prettierOptions:
      jsxBracketSameLine: true
      printWidth: 100
      trailingComma: "es5"
    useEslint: true

# Add these lines
"prettier-eslint":
    eslintIntegration: true

Also, I think it’d be better suited to ask in the prettier-atom repository, since a lot of here don’t use Atom regularly, and hence wouldn’t be able to help you out as well as them! 😄

@samrith-s Hi, short notes:

1. Check name and path of your VS Code settings file. It’s .vscode/settings.json (not .settings.json)
2. File has to be out of project folder with package.json file.
3. Check your folder names named in workingDirectories. Maybe: "eslint.workingDirectories": [ "./shopA", "./shopB", "./starter"] In each of them you can find folder src. Try do not use just only ./ (in the list)
4. Remove eslint and take it back: npm remove eslint npm install -D eslint Last note: @hutch120 it is not solution, you are right.

@sshmyg Hope I’m not overstepping, but as far as I can tell using the option eslint.workingDirectories documented in the project Readme file is the recommended solution to get this extension working with ESLint ^6 as discussed in this very long thread, with highlights here, here and here. I’ve also added a few notes in this thread in relation to getting a create-react-app project working that I think is the correct way to configure this VSCode extension for that use-case. Hope this helps.

Can no longer build my vue app with line 6 in place, commenting out removes the error from my vue build which is:

Module build failed (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js): Error: Failed to load plugin prettier: Cannot find module ‘eslint-plugin-prettier’ Referenced from: /Users/adamprocter/Documents/GitKraken/couchdocs/.eslintrc.js

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

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.

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.

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"
},

@dbaeumer that fixed it for me. Thanks