Eslint-plugin-vue: Rule proposal: spaces around equal signs in HTML attributes

[RomeroMsk]

Please describe what the rule should do:

Ensure there are no spaces around equal signs in HTML attribute definitions.

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:

<link rel = "stylesheet" href = "styles.css">

<link rel= "stylesheet" href ="styles.css">

[chrisvfritz]

I like this and I'd actually add it to the style guide if it was more Vue-specific, rather than general to HTML. I'm thinking this would work well in the recommended category with a default of no space before or after. To accommodate other styles though, I wonder if we should have options for spacesBefore and spacesAfter, which default to 0, but allow any positive integer. Thoughts?

[michalsnik]

I don't see why people might want to use spaces here. And I personally think this rule should either forbid it totally or not so I think the current implementation is perfectly fine with no extra configuration :)

[mysticatea]

I'd like to make more configurable by two reasons.

1. Consistent with core rules. Most core rules about spacing style around a token have the option.

2. Allow configuring for vertical alignments. E.g.

   <div foo  ="aaa"
        barbz="bbb">
   

[chrisvfritz]

@michalsnik I think it's a matter of how difficult it would be to implement. While I _personally_ don't do this, I can imagine a compelling argument for:

rel= "stylesheet"

or

rel = "stylesheet"

which are similar to these two styles that I've seen used in JavaScript:

rel: 'stylesheet'

or

rel : 'stylesheet'

I think the argument could easily be made that they even improve readability.

[chrisvfritz]

@mysticatea Yeah, that's another good point around vertical alignment! I didn't think about that. 🙂

[michalsnik]

I'm not convinced with those arguments @mysticatea @chrisvfritz
Why would we allow customizing it in a way that no one is probably using? I never saw anyone preferring to write HTML in this kind of way.

We can't compare everything to JavaScript, it's HTML after all.

So if someone wants to not have spaces around equal signs - he could turn this rule on. Otherwise he could not use it and align attributes vertically instead - no problem (Although aligning attributes itself is also not very good idea, if you think about case with an event with two modifiers it would look super weird, but having this rule disabled you could still do that anyway)

I try to be not too opinionated, but I just don't see any real value in allowing this syntax:

<div id= "something"></div>
<div id = "something"></div>