Eslint-plugin-vue: Message: Use the latest vue-eslint-parser

[flakobatako]

Tried to use the eslint-plugin-vue@beta, but i'm getting the following error: Use the latest vue-eslint-parser.

Here's my .eslintrc.js:

// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'vue-eslint-parser',
parserOptions: {
sourceType: 'module',
parser: 'babel-eslint',
sourceType: 'module',
allowImportExportEverywhere: false
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: ['eslint:recommended',
'plugin:vue/recommended'],
// required to lint *.vue files
plugins: [

],
'settings': {

},
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'camelcase': 2,
'vue/no-invalid-template-root':2
}
}

I installed the parser, and upgraded eslint to 4.0, but i'm still getting the error, both in vs code, and at compile time.
.

[mysticatea]

Thank you for this issue.

I guess you have failed to install. Could you try re-install (rm -rf node_modules package-lock.json && npm i) and restart the editor?

[michalsnik]

Plus you don't have to install vue-eslint-parser, it's included in eslint-plugin-vue dependencies and you should not change the version of it on your own @flakobatako

[hypercub3d]

I have a related issue.

1. npm install -g [email protected] eslint-plugin-vue@beta

module.exports = {
extends: [
'eslint:recommended',
'plugin:vue/recommended'
],
rules: {
'vue/no-invalid-v-if': 'error',
'vue/jsx-uses-vars': 2
}
}

1. eslint src/components/dashboard.vue --ext .vue

And I get:

Cannot find module 'vue-eslint-parser'
Referenced from: plugin:vue/recommended
Referenced from: /Users/user/Documents/Projects/sapi_app/.eslintrc.js
Error: Cannot find module 'vue-eslint-parser'
Referenced from: plugin:vue/recommended
Referenced from: /Users/user/Documents/Projects/sapi_app/.eslintrc.js
at ModuleResolver.resolve (/usr/local/lib/node_modules/eslint/lib/util/module-resolver.js:74:19)
at load (/usr/local/lib/node_modules/eslint/lib/config/config-file.js:554:42)
at configExtends.reduceRight.e (/usr/local/lib/node_modules/eslint/lib/config/config-file.js:424:36)
at Array.reduceRight (native)
at applyExtends (/usr/local/lib/node_modules/eslint/lib/config/config-file.js:408:28)
at load (/usr/local/lib/node_modules/eslint/lib/config/config-file.js:566:22)
at configExtends.reduceRight.e (/usr/local/lib/node_modules/eslint/lib/config/config-file.js:424:36)
at Array.reduceRight (native)
at applyExtends (/usr/local/lib/node_modules/eslint/lib/config/config-file.js:408:28)
at Object.load (/usr/local/lib/node_modules/eslint/lib/config/config-file.js:566:22)

[msokk]

Have the same issue with CLI and also in Atom. Latest version (1.1.0-4) of parser got installed into node_modules as a subdepency of the plugin. Running ESLint v4.

[JasinYip]

I have the same problem on v3.1.0, happens on my import and const code.

[michalsnik]

Hey @JasinYip, v3.1.0 doesn't contain the fix. Please check v3.1.1.

[msolovyov]

I still have this issue on v3.1.3

[lincenying]

eslint: 4.1.0
vue-eslint-parser: 1.1.0-6
eslint-plugin-vue: 3.1.3

Also have the same problem

[mysticatea]

@msolovyov @lincenying I suspect it's installation problem. Could you try the following steps?

• Remove node_modules and package-lock.json.
• npm install
• Restart editors.

[lincenying]

@mysticatea

The reason is "parser": "babel-eslint", after the deletion, no error, but all the rules are invalid

[mysticatea]

@lincenying Ah, I see. Thank you for your investigation. Yes, this plugin requires the custom parser vue-eslint-parser to parse templates (this setting is included in plugin:vue/recommended). So it conflicts the "parser": "babel-eslint" setting.

The workaround is here: https://github.com/mysticatea/vue-eslint-parser#-options

"parserOptions": {"parser": "babel-eslint"} should work.

[michalsnik]

@mysticatea I think we should add this information to Readme. Or at least point to this link with information clear information that user should not set parser directly while using this plugin.

[JasinYip]

@lincenying Ah, I see. Thank you for your investigation. Yes, this plugin requires the custom parser vue-eslint-parser to parse templates (this setting is included in plugin:vue/recommended). So it conflicts the "parser": "babel-eslint" setting.

The workaround is here: https://github.com/mysticatea/vue-eslint-parser#wrench-options

"parserOptions": {"parser": "babel-eslint"} should work.

Works! Thanks @mysticatea

[azaars]

I'm using VSCode and followed everything that was advised, but I still got stuck with Use the latest vue-eslint-parser errors. Finally I got it to work when I upgraded the version of modules in package.json to the latest, did a rm -f package-lock.json node_modules && npm i and issued a global npm -g upgrade. It seems like VSCode mixes usage between the global & local modules and reports misleading errors.

[alex-shamshurin]

Who has issues with configuring, try this starter config:

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2017,
    sourceType: 'module',
  },
  env: {
    browser: true,
  },
  extends: ['airbnb-base', 'plugin:vue/essential'],
  // required to lint *.vue files
  plugins: ['vue'],
};

[14glwu]

@lincenying Ah, I see. Thank you for your investigation. Yes, this plugin requires the custom parser vue-eslint-parser to parse templates (this setting is included in plugin:vue/recommended). So it conflicts the "parser": "babel-eslint" setting.

The workaround is here: https://github.com/mysticatea/vue-eslint-parser#-options

"parserOptions": {"parser": "babel-eslint"} should work.

Thanks，it works

[taoliujun]

Thank you for this issue.

I guess you have failed to install. Could you try re-install (rm -rf node_modules package-lock.json && npm i) and restart the editor?

thks, i did it and be fine.

[HAHAHA44]

For me , I write an Egg server in a project which is created by Vue-cli . I user typescript to write this project. And in the server code , I take the same error
Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-erroreslint(vue/no-duplicate-attributes)
The ending method is that I comment the extends in server`s .eslintrc file.

{
  // "extends": "eslint-config-egg/typescript",
  "parserOptions": {
    "project": "./tsconfig.json",
  },
  }

Maybe the eslint extends config in server folder and the outside are in conflict?