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

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 https://github.com/vuejs/eslint-plugin-vue/issues/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.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 11
  • Comments: 16 (2 by maintainers)

Most upvoted comments

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

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.

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: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-545325711

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

for me it was:

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

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

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

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.

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.

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