Similar to max-attributes-per-line force one line for less than specific number of attributes

[vedmant]

Please describe what the rule should do:

Should force vue template tag to a single line when it has less than specific number of attributes.

What category should the rule belong to?

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

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

For example we have an option of max attributes per line is 3, in this case:

Wrong:

<div>
  <ControlsSwitch
    v-model="postToYourWebsite"
    class="mb-8"
    label="Your website"
  />
  <ControlsSwitch
    v-model="postToSocialMedia"
    class="mb-8"
    label="Social Media"
  />
</div>

Right:

<div>
  <ControlsSwitch v-model="postToYourWebsite" class="mb-8" label="Your website" />
  <ControlsSwitch v-model="postToSocialMedia" class="mb-8" label="Social Media" />
</div>

If max attributes per line is 2:

Wrong:

<div>
  <ControlsSwitch v-model="postToYourWebsite" class="mb-8" label="Your website" />
  <ControlsSwitch v-model="postToSocialMedia" class="mb-8" label="Social Media" />
</div>

Right:

<div>
  <ControlsSwitch
    v-model="postToYourWebsite"
    class="mb-8"
    label="Your website"
  />
  <ControlsSwitch
    v-model="postToSocialMedia"
    class="mb-8"
    label="Social Media"
  />
</div>

[ota-meshi]

Thank you for posting the issue. I think checking for the new format should be an option in vue/max-attributes-per-line. This is because creating another rule conflicts with the vue/max-attributes-per-line rule.

If max attributes per line is 2:

Why is the second example Right? If you want to force two attributes on one line, I think it will look like the following example.

<div>
  <ControlsSwitch
    v-model="postToYourWebsite" class="mb-8"
    label="Your website"
  />
  <ControlsSwitch
    v-model="postToSocialMedia" class="mb-8"
    label="Social Media"
  />
</div>

[vedmant]

@ota-meshi Means max attributes per line before it turns into multiline with 1 attribute per line. Generally in my experience I never had formatting like

<ControlsSwitch v-model="postToYourWebsite" class="mb-8" label="Your website" />

It's always either a single line, or one attribute per line. Just depends on either total line length or number of attributes. I event would prefer to split based on max line length instead of max attributes number.

[ota-meshi]

Means max attributes per line before it turns into multiline with 1 attribute per line. Generally in my experience I never had formatting like

Oh, I see.

In that case too, we should consider adding a new option to max-attributes-per-line. Do you have ideas for new options?

I event would prefer to split based on max line length instead of max attributes number.

I think the option to enforce one line probably needs an option for maximum line length as well. Otherwise it may conflict with vue/max-len rule. https://eslint.vuejs.org/rules/max-len.html