Rule Proposal: vue/no-extra-whitespaces

[riophae]

Please describe what the rule should do:

This rule warns about the usage of useless spaces.

What category of rule is this? (place an "X" next to just one item)

[x] Enforces code style
[ ] Warns about a potential error
[ ] Suggests an alternate way of doing something
[ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

<template>
  <div class="wrapper">
    <div class="example1" ></div>
    <div class="example2"  @click="handleClick">
      <!-- Notice there are two spaces between `class` and `@click` -->
    </div>
    <div class="example3 ">
      <!-- Is it possible to catch extra spaces in attribute value? -->
    </div>
  </div>
</template>

However, the following should be considered fine:

<template>
  <div class="wrapper">
    <self-closing />
    <div 
      class="multiple-line"
      @click="handleClick"
      >
    </div>
  </div>
</template>

The suggested rule name is likely not good enough.

[armano2]

@riophae everything is possible

i like this rule (i will implement it today) but i don't think that catching extra spaces in attribute value should be handled (at-least not by default)

as rule name i propose no-extra-space-between-attributes

[riophae]

I think it should be no problem as far as we can make sure the attribute value is an expression rather than plain string, such as vue-related attributes.
Trimming values of event attributes, class and style should also be safe.

[mysticatea]

Thank you for this issue.

Sounds good to me.
I think that the rule name is better if it's vue/no-multi-spaces or something like. no-multi-spaces rule exists in core.

[armano2]

@mysticatea i like no-multi-spaces i will rename it