New: Add vue/single-attribute-single-line rule

[jacksongross]

This PR adds the vue/single-attribute-single-line rule.

Idea based on #1110

First time contributing so hopefully I've followed the rules here 😄

[ota-meshi]

Thank you for PR.

But I think single-attribute-single-line rule will conflict and error resolution will not be possible if you disable the allowFirstLine option of the max-attributes-per-line rule. So I think it's difficult to incorporate single-attribute-single-line rule into this plugin.
Do you have any ideas for resolving rule conflicts?

[jacksongross]

Thank you for PR.

But I think single-attribute-single-line rule will conflict and error resolution will not be possible if you disable the allowFirstLine option of the max-attributes-per-line rule. So I think it's difficult to incorporate single-attribute-single-line rule into this plugin.
Do you have any ideas for resolving rule conflicts?

I did consider catering for this behaviour as an option to the max-attributes-per-line rule, but opted to separate it as I felt it could be used in combination with that rule. I suppose it could definitely conflict if you disabled the allowFirstLine option, but being default enabled I thought this rule being an opt-in that it would be ok.

Not sure how this has been approached in the past where rules might collide based on options from another rule, so was hoping I could find some insight into that, and possibly some suggestions to improve this, and whether it would be an issue incorporating this rule.

[ota-meshi]

Even if it's opt-in, I think rule conflicts can confuse users. I think we most avoid conflicts within a single plugin.

I'm not a fan of your style, so I'm not familiar with the details, I think we can abolish the max-attributes-per-line rule and replace it with a new rule related to attribute line breaks.
The new rule gives users the free to use the features of the max-attributes-per-line and single-attribute-single-line rules in their settings.

[ota-meshi]

By the way, I don't think your current rule can resolve the error for the following one attribute:

<MyComponent :lorem="{
  prop: 42
}"/>

[jacksongross]

Even if it's opt-in, I think rule conflicts can confuse users. I think we most avoid conflicts within a single plugin.

I'm not a fan of your style, so I'm not familiar with the details, I think we can abolish the max-attributes-per-line rule and replace it with a new rule related to attribute line breaks.
The new rule gives users the free to use the features of the max-attributes-per-line and single-attribute-single-line rules in their settings.

Yeah that actually sounds like a better idea if we want to avoid conflicts but provide the functionality of both rules. Considering that the max-attributes-per-line rule is strongly recommended in the styleguide and isn't clear on what to do in the case of a single attribute, what would be the right path forward to achieving this? Personally, I think that part of the style guide is quite lacking, and would appreciate either an official recommendation on this, or having the power to configure it (which is why I made this PR in the first place). Happy to assist in either case 😄

[jacksongross]

By the way, I don't think your current rule can resolve the error for the following one attribute:

<MyComponent :lorem="{
  prop: 42
}"/>

ah yes good catch!

[vedmant]

I was searching a rule like this, but forcing some max number of attributes into single line, like 3 attributes is a single line, 4 and more multiline. Looks like this was not merged?

[jacksongross]

@vedmant should be able to achieve that with https://eslint.vuejs.org/rules/max-attributes-per-line.html

[vedmant]

@jacksongross I'm not able to make it turn multiline tags like:

<DisclosureButton
  class="flex items-center text-lg font-medium text-left"
/>

to single line

<DisclosureButton class="flex items-center text-lg font-medium text-left" />

It works only opposite direction, from single line to multi line.