Description
I've been working on setting up Vue support for eslint in a repo where we use ES5, and the Vue plugin doesn't work well with eslint's ES5 mode.
Installing the Vue plugin silently overwrites certain settings: ecmaVersion is set to 2018, sourceType to module, and JSX is enabled. This caused us to accidentally disable enforcement of our "no ES6" rule for about a month until I found out.
I tried to remedy this by changing these settings back in our .eslintrc.json, but that causes strange errors and even crashes to happen when linting templates that use v-for.
Tell us about your environment
- ESLint version: 6.8.0
- eslint-plugin-vue version: 6.1.2
- Node version: 10.15.2
Please show your full configuration:
{
"extends": [
"plugin:vue/recommended"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "script",
"ecmaFeatures": {
"jsx": false
}
}
}What did you do?
First file (simple v-for):
<template>
<div class="foo">
<p
v-for="x in xs"
:key="x"
>
{{ x }}
</p>
</div>
</template>Second file (v-for using parens to get both the value and the index):
<template>
<div class="foo">
<p
v-for="(x, index) in xs"
:key="index"
>
{{ x }}
</p>
</div>
</template>What did you expect to happen?
Both of these files should lint without errors, even in ES5 mode (ecmaVersion: 5 in the eslint config).
What actually happened?
For the first file, I get confusing errors about the v-for line:
4:7 error 'v-for' directives require that attribute value vue/valid-v-for
4:14 error Parsing error: Unexpected token x vue/no-parsing-error
5:7 error Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive vue/valid-v-for
For the second file, I get an error message that exposes a JS error / crash in the plugin code, without reference to a line number:
0:0 error Parsing error: Cannot read property 'block' of undefined
Both of these errors only happen if ecmaVersion: 5 is set. If I set ecmaVersion: 6, the errors go away.