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: prettier/prettier-vscode#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

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.

[kufii]

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

[bartekpacia]

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.

[Naragod]

The following worked for me
export NODE_PATH='npm root -g'

the quotation marks ' are actually ` tildes

[dbaeumer]

There is now a new Insider version of the extension that should help improve this. Please see #815 on how to beta test it. Please be aware that this is a bigger rewrite of some functionality so other things might break :-)

[beto-aveiga]

Having eslint-config-prettier and eslint-plugin-prettier worked for me. I'm currently using a lando drupal recipe for development and I added these packages on the root folder of the lando install. Hope that helps.

[robatwilliams]

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": ["./"],

[MarceloPrado]

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.

[dbaeumer]

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

[rfgamaral]

I'm not sure if the issue I'm currently having is related to this one but here's my file structure:

.
├── .vscode
│   └── settings.json
├── configs
│   └── .eslintrc.json
├── lerna.json
├── node_modules
├── package.json
├── packages
│   ├── angularjs-component
│   │   └── .eslintrc
│   └── core
├── README.md
└── yarn.lock

.vscode/settings.json

{
    "eslint.enable": true,
    "eslint.packageManager": "yarn",
    "eslint.workingDirectories": [
        {
            "changeProcessCWD": true,
            "directory": "./packages/core"
        },
        {
            "changeProcessCWD": true,
            "directory": "./packages/angularjs-component"
        }
    ],
    "typescript.tsdk": "node_modules/typescript/lib"
}

config/.eslintrc.json

{
  "extends": [
    "@rfgamaral/eslint-config-typescript-unified/airbnb",
    "plugin:jest/recommended",
    "plugin:jest/style"
  ],
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "ignorePatterns": [
    "**/coverage",
    "**/dist",
    "**/node_modules",
    "**/*.config.js"
  ],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": [
      "warn",
      {
        "allowExpressions": true,
        "allowTypedFunctionExpressions": true,
        "allowHigherOrderFunctions": true
      }
    ],
    "@typescript-eslint/no-unused-vars": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "**/__{mocks,tests}__/**/*.{js,ts}",
          "**/*.test.{js,ts}",
          "**/jest.setup.{js,ts}"
        ]
      }
    ],
    "import/prefer-default-export": "off",
    "prettier/prettier": "warn"
  }
}

packages/angularjs-component/.eslintrc

{
  "root": true,
  "extends": "../../configs/.eslintrc.json"
}

packages/angularjs-component/tsconfig.json

{
  "extends": "../../configs/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist",
    "paths": {
      "@tier-based-promotions/core": [
        "../core/src/index.ts"
      ]
    }
  },
  "exclude": [
    "./coverage/**/*",
    "./dist/**/*",
    "./node_modules/**/*",
    "./*.config.js"
  ]
}

And here's my issue...

When I run eslint directly in the CLI inside the packages/angularjs-component folder, everything is fine, everything works and I get no errors/warnings. The paths mapping are working, great :)

However, this extension is reporting me the following error: Unable to resolve path to module '@tier-based-promotions/core'. eslint(import/no-unresolved). It feels like it's ignoring my paths mapping in tsconfig.json.

For more context, my base .eslintrc.json file is using @rfgamaral/eslint-config-typescript-unified/airbnb, which is something I created for my projects. And I have this ESLint configuration with something like this:

"parserOptions": {
    "project": "./tsconfig.json",
},

It seems that ESLit CLI is using this configuration properly (and reading tsconfig.json), while the ESLint extension for VS Code is not.

Thoughts?

[dbaeumer]

These settings look good to me:

    "eslint.workingDirectories": [
        {
            "changeProcessCWD": true,
            "directory": "./packages/core"
        },
        {
            "changeProcessCWD": true,
            "directory": "./packages/angularjs-component"
        }
    ],

Do you have a repository I can clone that demos this. Otherwise it is very hard to tell what is going on. The extension does use the ESLint npm module to do all the resolving and validating. So code wise it does the same as the eslint comment in the terminal. So it can only be a config / cwd issue.

[rfgamaral]

@dbaeumer I don't have one for the moment and I'm kinda busy this sprint but I'll try to create one as soon as possible and post back. Thank you.

[rfgamaral]

@dbaeumer Just remembered something that might be relevant to my issue... I'm using Windows 10 and my project is stored in the Windows filesystem. However, when I open the terminal inside VS Code I'm running WSL and that's where I have installed all my dependencies with yarn. I don't have node, npm, yarn or any other tool installed in Windows, only WSL.

[dbaeumer]

@rfgamaral actually that shouldn't make a difference. But you never know :-)

[Lakitna]

With the VS code 1.41.0 this issue should be resolved for most people. From the release notes:

ESLint

Improvements to the ESLint extension:

• Better support for ESLint 6.x - In most cases, it shouldn't be necessary to configure working directories when using ESLint 6.x.
• Improved TypeScript detection - As soon as TypeScript is correctly configured inside ESLint, you no longer need additional configuration through VS Code's eslint.validate setting. The same is true for HTML and Vue.js files.
• Glob working directory support - Projects that have a complex folder structure and need to customize the working directories via eslint.workingDirectories can now use glob patterns instead of listing every project folder. For example, code-* will match all project folders starting with code-. In addition, the extension now changes the working directory by default. You can disable this feature with the new !cwd property.
• Improved Auto Fix on Save - Auto Fix on Save is now part of VS Code's Code Action on Save infrastructure and computes all possible fixes in one round. It is customized via the editor.codeActionsOnSave setting. The setting supports the ESLint specific property source.fixAll.eslint. The extension also respects the generic property source.fixAll.

I was able to verify that Eslint now works in my projects.

[simon-kolkmann]

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

[Lakitna]

I do not use prettier, but it does work with all of eslint-plugin-import, eslint-plugin-sonarjs, and eslint-plugin-unicorn.

I've installed eslint-plugin-prettier too to try it out and things seem to be working fine for me.

As (poorly) mentioned before there are probably a bunch of cases where things will continue to not work but it's worth checking if you can use eslint@6 now. For the failing situations, we'll probably have to wait on the next fix. Either by the VScode team or @dbaeumer.

[mifi]

For me with 1.41.0 it still doesn't work. I get no error but there is no linting whenever I open a root with many projects. However opening only one project folder (which has .eslintrc) it works. Using eslint 5.16.0. Also tried with 6 - same problem.

[dbaeumer]

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.

[dbaeumer]

@simon-lorenz please see my comments in the previous post.

I will close the issue since in a more complex folder setup (e.g. mono repository) I couldn't find a way, without false positives, to detect a correct setup .It is comparable to the fact that eslint executed in a terminal usually requires to cd into the right directory. I am open for suggestions to further improve this though.

If you still see a problem after trying the new auto mode or pattern please open a new issue with steps on how to reproduce what you are experiencing. Best a GitHub repository to clone

[magom001]

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

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

[ProjectINT]

thanks to bartekpacia: #696 (comment)

Fortunately the workaround (open Code in the folder with .eslintrc.json) works fine.

it's working for me

[jamieeeeeeeee]

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

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

Working for me! Thanks!

[hutch120]

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.