Failed to load config "eslint-plugin-vue" to extend from

Question

I am setting up eslint for vue in vscode. I am getting this notification when ever I format my code.

 ESLint stack trace:
[Error - 2:20:56 AM] Error: Failed to load config "eslint-plugin-vue" to extend from.
Referenced from: C:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\package.json
    at configMissingError (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:265:9)
    at ConfigArrayFactory._loadExtendedShareableConfig (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:826:23)
    at ConfigArrayFactory._loadExtends (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:731:25)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:660:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:596:20)
    at _normalizeObjectConfigData.next (<anonymous>)
    at createConfigArray (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:340:25)
    at ConfigArrayFactory.loadInDirectory (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:433:16)
    at CascadingConfigArrayFactory._loadConfigInAncestors (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:328:46)

my package.json file:-

{
  "name": "vue-eslint-truth",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-config-prettier": "^8.2.0",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/recommended",
      "eslint:recommended",
      "prettier",
      "eslint-plugin-vue"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

I am new to vue js and I don't know what to do to make the eslint work correctly. When I try to run the vue app using npm run serve , the development server just don't start and gives me this error that

Syntax Error: Error: Failed to load config "eslint-plugin-vue" to extend from.
Referenced from: C:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\package.json
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at _normalizeObjectConfigData.next (<anonymous>)


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

Answer 1

You don't need to extend eslint-plugin-vue on your eslintConfig of you packages.json. As you can see on documentation .