javascript - error getting eslint to work with eslint-plugin-vue - Stack Overflow

admin管理员组

文章数量:1391925

I'm not a front-end dev but am trying to lint my javascript / Vue.js file in a Rails 5.1 app. I'm not that familiar with the node ecosystem. I get the following error and wanted to know where to start to fix this:

Tue Apr 17$ eslint javascript/ --ext .vue
Cannot find module 'eslint-plugin-vue'
Referenced from: /Users/jt/repos/embers2/.eslintrc.js
Error: Cannot find module 'eslint-plugin-vue'
Referenced from: /Users/jt/repos/embers2/.eslintrc.js
    at ModuleResolver.resolve (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/util/module-resolver.js:74:19)
    at resolve (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:466:29)
    at load (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:542:26)
    at configExtends.reduceRight (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:421:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:403:28)
    at loadFromDisk (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:514:22)
    at Object.load (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:550:20)
    at Config.getLocalConfigHierarchy (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config.js:228:44)
    at Config.getConfigHierarchy (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config.js:180:43)
Tue Apr 17$ 

My .eslint.js file is:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:remended',
    'plugin:vue/essential',
    'airbnb-base'

  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
};

and my package.json is:

{
  "dependencies": {
    "@rails/webpacker": "^3.4.3",
    "axios": "^0.17.1",
    "coffeescript": "1.12.7",
    "octicons": "^6.0.1",
    "postcss-smart-import": "^0.7.6",
    "solc": "^0.4.19",
    "vue": "^2.5.16",
    "vue-awesome": "^2.3.4",
    "vue-cookie": "^1.1.4",
    "vue-loader": "^14.2.2",
    "vue-moment": "^3.2.0",
    "vue-octicon": "^2.1.1",
    "vue-progressbar": "^0.7.3",
    "vue-router": "^2.7.0",
    "vue-template-piler": "^2.5.16",
    "vue2-google-maps": "^0.8.10",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "eslint": "^4.19.1",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-vue": "^4.4.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "vue-masonry-css": "^1.0.1",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "2.11.1"
  }
}

Where do I start looking to debug this? This ecosystem is still very opaque to me.

---

On a ment's request, I ran npm install and verified that the plugin appears to be in ./node_modules/:

But I'm still getting the same error. Any other ideas?

I'm not a front-end dev but am trying to lint my javascript / Vue.js file in a Rails 5.1 app. I'm not that familiar with the node ecosystem. I get the following error and wanted to know where to start to fix this:

Tue Apr 17$ eslint javascript/ --ext .vue
Cannot find module 'eslint-plugin-vue'
Referenced from: /Users/jt/repos/embers2/.eslintrc.js
Error: Cannot find module 'eslint-plugin-vue'
Referenced from: /Users/jt/repos/embers2/.eslintrc.js
    at ModuleResolver.resolve (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/util/module-resolver.js:74:19)
    at resolve (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:466:29)
    at load (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:542:26)
    at configExtends.reduceRight (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:421:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:403:28)
    at loadFromDisk (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:514:22)
    at Object.load (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config/config-file.js:550:20)
    at Config.getLocalConfigHierarchy (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config.js:228:44)
    at Config.getConfigHierarchy (/usr/local/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint/lib/config.js:180:43)
Tue Apr 17$ 

My .eslint.js file is:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:remended',
    'plugin:vue/essential',
    'airbnb-base'

  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
};

and my package.json is:

{
  "dependencies": {
    "@rails/webpacker": "^3.4.3",
    "axios": "^0.17.1",
    "coffeescript": "1.12.7",
    "octicons": "^6.0.1",
    "postcss-smart-import": "^0.7.6",
    "solc": "^0.4.19",
    "vue": "^2.5.16",
    "vue-awesome": "^2.3.4",
    "vue-cookie": "^1.1.4",
    "vue-loader": "^14.2.2",
    "vue-moment": "^3.2.0",
    "vue-octicon": "^2.1.1",
    "vue-progressbar": "^0.7.3",
    "vue-router": "^2.7.0",
    "vue-template-piler": "^2.5.16",
    "vue2-google-maps": "^0.8.10",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "eslint": "^4.19.1",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-vue": "^4.4.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "vue-masonry-css": "^1.0.1",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "2.11.1"
  }
}

Where do I start looking to debug this? This ecosystem is still very opaque to me.

---

On a ment's request, I ran npm install and verified that the plugin appears to be in ./node_modules/:

But I'm still getting the same error. Any other ideas?

• javascript
• npm
• eslint

Share Improve this question Follow edited Apr 20, 2021 at 22:40 zcoop98 3,10722 gold badges2424 silver badges3737 bronze badges asked Apr 17, 2018 at 23:42 timponetimpone 20k3636 gold badges128128 silver badges224224 bronze badges 2

• Wherever your package.json file is, try dong npm install in the terminal/cmd. The npm package eslint-plugin-vue is not installed and this mand will install all packages in package.json and overwrite those that exist already. – Rahul Desai Commented Apr 17, 2018 at 23:51
• 1 thx @RahulDesai - I did that and am getting the same error. the plugin appears to be in my ./node_modules/ . Any other ideas? – timpone Commented Apr 18, 2018 at 3:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You need to set the eslint working directories in .vscode/settings.json as following

{
  "eslint.workingDirectories": [
    "./client",
  ]
}

Here, ./client path is relative to where you initiated your visual studio code i.e. where your project root is

本文标签： javascripterror getting eslint to work with eslintpluginvueStack Overflow