VSCode linting not working - Cannot find module 'eslint-plugin-vue'

[robert-niestroj]

Tell us about your environment

• ESLint version: 6.6.0
• eslint-plugin-vue version: 5.2.3 and 6.0.0
• Node version: 12.7.0

Please show your full configuration:

module.exports = {
  root: true,

  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 8,
    sourceType: 'module'
  },

  env: {
    browser: true
  },

  extends: [
    'plugin:vue/recommended',
    '@vue/standard'
  ],

  // required to lint *.vue files
  plugins: [
    'vue'
  ],

  globals: {
    'ga': true, // Google Analytics
    'cordova': true,
    '__statics': true,
    'process': true
  },

  // add your custom rules here
  rules: {
    'quotes': 'off',
    'semi': 0,
    // allow async-await
    'generator-star-spacing': 'off',
    // allow paren-less arrow functions
    'arrow-parens': 'off',
    'one-var': 'off',
    'import/first': 'off',
    'import/named': 'error',
    'import/namespace': 'error',
    'import/default': 'error',
    'import/export': 'error',
    'import/extensions': 'off',
    'import/no-unresolved': 'off',
    'import/no-extraneous-dependencies': 'off',
    'prefer-promise-reject-errors': 'off',

    // allow console.log during development only
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // allow debugger during development only
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    'space-before-function-paren': 0
  }
}

What did you do?

"eslint": "^5.10.0",
"eslint-loader": "^2.1.1",
 Upgrade to   
"eslint": "^6.5.1",
"eslint-loader": "^3.0.2",
Later upgrade to 6.6.0 didnt help.

clear node_modules

Had also "eslint-plugin-vue": "^5.0.0", then upgraded to 5.2.3 after reading #911

What did you expect to happen?
Expected linting to work in VSCode, like it did before.

What actually happened?
[Info - 20:43:32] ESLint server stopped.
[Info - 20:43:34] ESLint server running in node v10.11.0
[Info - 20:43:34] ESLint server is running.
[Info - 20:43:38] ESLint library loaded from: c:\proj\frontend\node_modules\eslint\lib\api.js
[Error - 20:43:38]
Failed to load plugin 'vue' declared in 'frontend.eslintrc.js': Cannot find module 'eslint-plugin-vue'
Require stack:

• C:\proj_placeholder_.js
  Referenced from: C:\proj\frontend.eslintrc.js
  Happened while validating C:\proj\frontend\src\App.vue
  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-vue' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-vue' isn't installed correctly.

Consider running eslint --debug C:\proj\frontend\src\App.vue from a terminal to obtain a trace about the configuration files used.

I dont have them installed globally:

C:\proj>npm list -g --depth 0
C:\Users\rniestroj\AppData\Roaming\npm
+-- @quasar/cli@1.0.0
+-- npm-check@5.9.0
+-- npx@10.2.0
+-- tslint@5.19.0
`-- UNMET PEER DEPENDENCY typescript@>=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >=3.0.0-dev || >= 3.1.0-dev || >= 3.2.0-dev 

npm ERR! peer dep missing: typescript@>=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >=3.0.0-dev || >= 3.1.0-dev || >= 3.2.0-dev, required by tslint@5.19.0
npm ERR! peer dep missing: typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >= 3.0.0-dev || >= 3.1.0-dev, required by tsutils@2.29.0

When i did run from cmd:
C:\proj\frontend\node_modules\.bin>eslint --debug C:\proj\frontend\src\App.vue

It shows the warning for example:
eslint:ignored-paths contains: +2s
eslint:ignored-paths target = "C:\proj\frontend\src\App.vue" +2ms
eslint:ignored-paths base = "C:\proj\frontend\node_modules\.bin" +6ms
eslint:ignored-paths relative = "..\..\src\App.vue" +3ms
eslint:ignored-paths result = false +1ms
eslint:cli-engine Lint C:\proj\frontend\src\App.vue +0ms
eslint:linter Linting code for C:\proj\frontend\src\App.vue (pass 1) +0ms
eslint:linter Verify +3ms
eslint:linter With ConfigArray: C:\proj\frontend\src\App.vue +5ms
eslint:linter Apply the processor: 'vue/.vue' +3ms
eslint:linter A code block was found: '(unnamed)' +1ms
eslint:linter Generating fixed text for C:\proj\frontend\src\App.vue (pass 1) +320ms
eslint:source-code-fixer Applying fixes +0ms
eslint:source-code-fixer shouldFix parameter was false, not attempting fixes +4ms
eslint:file-enumerator Complete iterating files: ["C:\proj\frontend\src\App.vue"] +2s
eslint:cli-engine Linting complete in: 2093ms +344ms

C:\proj\frontend\src\App.vue
13:9 warning Property name "XXX" is not PascalCase vue/name-property-casing

? 1 problem (0 errors, 1 warning)
0 errors and 1 warning potentially fixable with the --fix option.

[robert-niestroj]

Reverted back to ESLint 5.16.0 and works again.

    "eslint": "^5.16.0",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-vue": "^5.2.3",

[yaodebian]

I have the same problem recently, have you resolved it yet under the version 6.6.0 of Eslint?

[yaodebian]

Reverted back to ESLint 5.16.0 and works again.

    "eslint": "^5.16.0",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-vue": "^5.2.3",

Through some of your descriptions and some issue links above, I know the cause of the problem, thank you. At the same time, I am very sorry that I didn't look carefully what you write at first.

[robert-niestroj]

Verified it today with ESLint 6.6.0 and the latest eslint-plugin-vue 6.0.0 and the problem still remains.

[thedelk]

I know the cause of the problem

@yaodebian That's awesome that you figured it out, but would you mind sharing what you did? It may help someone else who has this problem in the future.

[yaodebian]

Today I tried the following versions again.

• eslint-plugin-vue@6.0.1 and eslint:@6.6.0
• eslint-plugin-vue@6.0.0 and eslint@6.6.0
• eslint-plugin-vue@5.2.3 and eslint@ 6.6.0
• eslint-plugin-vue@5.2.3 and eslint@5.16.0

In the above four environments, I found that the first three environments can only run normally when they are installed locally. And Only the last environment can be run normally when installed globally or locally.

Therefore, I think that maybe some updates of eslint cause an error when reading the global eslint plugin.

[ThewBear]

Maybe related to this microsoft/vscode-eslint#696

This is an expected behavior in eslint 6 as it will load plugin relatively to cwd

If you are opening vscode with non-project root, consider set each project root directory with eslint.workingDirectories.
More suggestion: microsoft/vscode-eslint#696 (comment)

[robert-niestroj]

THX @ThewBear , that was the issue. After setting the eslint workingdirectories in .vscode/settings.json like this:

{
"eslint.workingDirectories": [
    "./frontend"
]
}

i had also to install this dependencies:

npm install eslint-plugin-import --save-dev
npm install eslint-plugin-node --save-dev
npm install eslint-plugin-promise --save-dev
npm install eslint-plugin-standard --save-dev

Now everything works on the latest version of the plugins.
I'm closing this.

[hitautodestruct]

For me it was just setting:

"eslint.workingDirectories": [
    "./frontend"
]
// ./frontend path is relative to where you initiated your visual studio code i.e. where your project root is

I didn't need the other plugins

[mesqueeb]

for me it was:

npm i -D eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

[cn1001wang]

thanks，我今天也遇到了这个问题。哭。。。vscode会去顶层目录下找'eslint-plugin-vue'，但我把这个项目是放在子目录下的，所以他不会生效。I got it

[antgustech]

for me it was:

npm i -D eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

Thanks, this finally solved the issue for me!

[ghost]

For me it was just setting:

"eslint.workingDirectories": [
    "./frontend"
]
// ./frontend path is relative to where you initiated your visual studio code i.e. where your project root is

I didn't need the other plugins

Does someone know how I can do this if I don't use VS Code? My vue project is in frontend to but I don't know how I can tell that eslint which means I am getting the same error

[mariusa]

A comment from microsoft/vscode-eslint#696 that worked for me too:

export NODE_PATH='npm root -g'

the quotation marks ' are actually ` tildes

[pistell]

I had this issue as well. Turns out Eslint and Prettier were fighting each other. I just went into my settings.json and commented out editor.defaultFormatter like this:

"[vue]": { // "editor.defaultFormatter": "esbenp.prettier-vscode" },

[mflin-emburse]

I had this issue as well. Turns out Eslint and Prettier were fighting each other. I just went into my settings.json and commented out editor.defaultFormatter like this:

"[vue]": { // "editor.defaultFormatter": "esbenp.prettier-vscode" },

This fixed my problem. It was a very specific case where only the @typescript-eslint/eslint-plugin module couldn't be found if added to .eslintrc.extends