Description
This is probably a very rare edge case related to how Windows linebreaks are interpreted. It doesn't occur when using normal Unix linebreaks (Sadly not an option on the project I'm working).
I don't expect such rare cases to be a priority or even be fixed. I just want to document it in case someone else falls into the same situation.
Tell us about your environment
- ESLint version: 5.8.0
- eslint-plugin-vue version: 5.0.0
- Node version: 11.6.0
Please show your full configuration:
{
"root": true,
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"plugin:vue/strongly-recommended",
"@vue/airbnb"
],
"rules": {
"max-len": "off",
"no-param-reassign": 0,
"linebreak-style": [
"error",
"windows"
]
},
"parserOptions": {
"parser": "babel-eslint"
}
}What did you do?
New project from Vue CLI v3. Set up Eslint to use plugin:vue/strongly-recommended. Edit component as below and get warning about multiple spaces on the two first characters in the function name.
<template>
<div
@click="sayHello" // Eslint warning - vue/no-multi-spaces
class="hello"
>
<h1
@click="sayHello" // No warning
class="hello"
>
Hello
</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods: {
sayHello() {
return null;
},
},
};
</script>
What did you expect to happen?
After splitting attributes to their own line, there should be no errors or warnings. Using --fix should not do anything to the file.
What actually happened?
➜ vue-eslint git:(master) ✗ ./node_modules/.bin/eslint src/components/HelloWorld.vue
./src/components/HelloWorld.vue
3:13 warning Multiple spaces found before 'yHello"
' vue/no-multi-spaces
✖ 1 problem (0 errors, 1 warning)
0 errors and 1 warning potentially fixable with the `--fix` option.
Eslint starting to remove the function of @click="sayHello" when using VSCode Eslint fix. Doing it from terminal results in an stacktrace
➜ vue-eslint git:(master) ✗ ./node_modules/.bin/eslint src/components/HelloWorld.vue --fix
TypeError: Cannot read property 'range' of null
at TokenStore.getTokenBefore (./node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:3452:102)
at getFirstAndLastTokens (./node_modules/eslint-plugin-vue/lib/utils/indent-common.js:364:28)
at processNodeList (./node_modules/eslint-plugin-vue/lib/utils/indent-common.js:400:31)
at EventEmitter.VOnExpression (./node_modules/eslint-plugin-vue/lib/utils/indent-common.js:970:7)
at EventEmitter.emit (events.js:188:13)
at NodeEventGenerator.applySelector (./node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:3077:26)
at NodeEventGenerator.applySelectors (./node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:3091:22)
at NodeEventGenerator.enterNode (./node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:3099:14)
at traverse (./node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:110:13)
at traverse (./node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:122:13)
It does only happen when the @click is located on the root element. Also, switching the Eslint configuration to use plugin:vue/recommended still give the warning but how the order fixes are executed, it never triggers.