Eslint-plugin-vue: Throws Parsing Error inside template tag

[asolopovas]

Hi I am using Phpstorm and it throws Parsing Error inside template tag in vue files. I am not sure whats causing it. Maybe someone can help.

It does throw parsing error on <form class="bg col" @submit.prevent> if I remove @submit.prevent it throws it at :label="key"

Thanks in advance.

Tell us about your environment

• ESLint Version: 4.6.1
• eslint-plugin-vue Version: 3.10.0
• Node Version: 8.5.0

Please show your full configuration:

{
    "root": true,
    "parser": "babel-eslint",
    "plugins": ["flowtype", "html"],
    "settings": {
        "html/html-extensions": [".html"]
    },
    "globals": {
        "axios": true,
        "elastic": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
    ],
    "rules": {
        "curly": ["error", "all"],
        "comma-dangle": ["error", "only-multiline"],
        "camelcase": ["error", {"properties": "never"}],
        "flowtype/define-flow-type": 1,
        "flowtype/use-flow-type": 1,
        "indent": ["error", 4, {"SwitchCase": 1}],
        "object-curly-spacing": ["error", "never"],
        "space-before-function-paren": ["error", "never"],
        "space-before-blocks": ["error", "always"],
        "space-infix-ops": ["error", {"int32Hint": false}],
        "no-alert": "error",
        "no-dupe-args": "error",
        "no-duplicate-case": "error",
        "no-duplicate-imports": "error",
        "no-empty": "error"
    },
    "env": {
        "browser": true,
        "node": true,
        "commonjs": true,
        "es6": true
    }
}

What did you do? Please include the actual source code causing the issue.

<template>
    <div class="frame md-6 col ">
        <form class="bg col" @submit.prevent>
            <edit-row v-for="(value,key,index) in structure"
                      :label="key"
                      :key="index"
                      :params="value"
                      v-model="itemNew[key]"
            ></edit-row>
            <action-button :btns="{create: '&#9998;', reset: '&#x274C;'}"
                           @reset="resetForm()"
                           @create="create()"
            ></action-button>
        </form>
    </div>
</template>
<script>
    import newItem from '../mixins/newItem'

    export default {
        mixins: [newItem],
    }
</script>

What did you expect to happen?

No parse erorrs displayed

What actually happened? Please include the actual, raw output from ESLint.

Parse errors displayed in folowing form:
ESLint: Parsing error: Unexpected token 1| <template> 2| <div class="frame md-6 col "> 3| <form class="bg col" @submit.prevent> | ^ 4| <edit-row v-for="(value,key,index) in structure" 5| :label="key" 6| :key="index"

[mysticatea]

Thank you for this issue.

The cause is "parser": "babel-eslint", setting. Please move it into "parserOptions".

  {
      "root": true,
-     "parser": "babel-eslint",
+     "parserOptions": {
+         "parser": "babel-eslint"
+     },
      "plugins": ["flowtype", "html", "vue"],
      "settings": {
          "html/html-extensions": [".html"]
      },
      "globals": {
          "axios": true,
          "elastic": true
      },
      "extends": [
          "eslint:recommended",
          "plugin:vue/recommended"
      ],
      "rules": {
          "curly": ["error", "all"],
          "comma-dangle": ["error", "only-multiline"],
          "camelcase": ["error", {"properties": "never"}],
          "flowtype/define-flow-type": 1,
          "flowtype/use-flow-type": 1,
          "indent": ["error", 4, {"SwitchCase": 1}],
          "object-curly-spacing": ["error", "never"],
          "space-before-function-paren": ["error", "never"],
          "space-before-blocks": ["error", "always"],
          "space-infix-ops": ["error", {"int32Hint": false}],
          "no-alert": "error",
          "no-dupe-args": "error",
          "no-duplicate-case": "error",
          "no-duplicate-imports": "error",
          "no-empty": "error"
      },
      "env": {
          "browser": true,
          "node": true,
          "commonjs": true,
          "es6": true
      }
  }

See also: https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error

[asolopovas]

Now I am getting Error while loading rule 'vue/no-confusing-v-for-v-if': Cannot read property 'on' of undefined

[LeonWuV]

Thanks, solved my problem.

[zuobaiquan]

Thanks

[bosens-China]

I also have similar problems.

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  "globals": {
    "url": true,
  }
};

---

file: .vue

<template slot="pic" slot-scope="text, record, index">
</template>

---

vscode error

[vue/no-parsing-error]
Parsing error: Unexpected token ','.

[leereichardt]

The cause is "parser": "babel-eslint", setting. Please move it into "parserOptions".

I know this is an old thread, BUT. I tried this, and it worked for Vue, but now phpStorm is erroring out on all my JS files. Any ideas why?

[ohmymind]

and also：
"plugins": [ "react", "standard", "vue" ] // I forgot vue