Prefer boolean prop usage at first

[jd-solanki]

Please describe what the rule should do: This rule is related to this rule. In the existing rule we are enforcing defining the boolean rules first but in this rule, we can enforce using boolean props first.

What category should the rule belong to?

[x] 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:

   <!-- GOOD -->
    <v-btn
      flat
      color="success"
    >
      Success
    </v-btn>

   <!-- BAD -->
    <v-btn
      color="info"
      flat
    >
      Info
    </v-btn>

   <!-- GOOD -->
    <v-btn
      flat
      variant="outilned"
      color="success"
      rounded="pill"
    >
      Success
    </v-btn>

Additional context Placing boolean prop usage on top makes it easy to read the component props. 👀

[FloEdelmann]

That would collide with the Style Guide and the existing vue/attributes-order rule. (See also the vue/prefer-true-attribute-shorthand rule).

Maybe it would be possible to add a new option SHORTHAND_BOOL_ATTR to the vue/attributes-order rule. But the logic should not change for existing configurations:

• If SHORTHAND_BOOL_ATTR is present in the config, OTHER_ATTR would only apply to non-shorthand attributes.
• If SHORTHAND_BOOL_ATTR is not present in the config, OTHER_ATTR would apply to both shorthand and non-shorthand attributes (like it is now).

[jd-solanki]

SHORTHAND_BOOL_ATTR looks good. ❤️

[FloEdelmann]

See also #1728. That issue should probably be implemented together with this one.