Warning about multiple spaces in @click function name when on root element and using CRLF linebreaks

[thomassjogren]

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.

[josh-hemphill]

I also have this issue, but it's on a second-to-root component element.

<template>
	<v-card flat tile>
		<v-toolbar class="transparent" style="cursor:pointer;" dense flat
			@click="sectionExtend = !sectionExtend;"
		>
			<!--       ^        -->
			more content...
		</v-toolbar>
	</v-card>
</template>

[ota-meshi]

Thank you for this issue.

I opened the PR on vue-eslint-parser.

vuejs/vue-eslint-parser#74