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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:11
  • Comments:15 (2 by maintainers)

github_iconTop GitHub Comments

49reactions
hitautodestructcommented, Dec 2, 2019

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

36reactions
robert-niestrojcommented, Nov 20, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

error getting eslint to work with eslint-plugin-vue - Stack Overflow
You need to set the eslint working directories in .vscode/settings.json as following { "eslint.workingDirectories": [ "./client", ] }.
Read more >
User Guide | eslint-plugin-vue
See also: "Visual Studio Code" section and Vetur - Linting. Does not work well with <script setup> #. The variables used in the...
Read more >
Vue JavaScript Tutorial in Visual Studio Code
Linting. Linters analyze your source code and can warn you about potential problems before you run your application. The Vue ESLint plugin (eslint-plugin-vue) ......
Read more >
eslint/eslint - Gitter
(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "/home/vim/src".) It's likely that the plugin isn't installed...
Read more >
ESLint and Prettier with Vite and Vue.js 3 - Vue School Blog
Linting isn't going to save your code from any business logic flaws but ... Visit the eslint-plugin-vue docs to see the other configurations ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found