Remove Multi-attribute-elements-strongly-recommended

I think we should reconsider https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended and its dedicated eslint rule that is included by default in strongly-recommended It doesn’ make sense to split per attribute count as they can be very short leading to extremely narrow-column-looking html. There was this issue https://github.com/vuejs/eslint-plugin-vue/issues/378 but I don’t think it makes sense to support both rules I think we should split when the line is above a certain length (like prettier does). And this can already be achieved by deactivating the eslint rule for max-attributes-per-line and using prettier but recommending to split per attribute count is bad. Take vuetify as an example:

          <v-layout
            shrink
            align-center
          >
            <v-btn
              small
              depressed
            >Engagement</v-btn>
            <v-btn
              small
              depressed
              color="primary"
            >
              <v-icon>loop</v-icon> GED
            </v-btn>
            <v-btn
              depressed
              small
              color="info"
            >
              <v-icon>cast</v-icon>
            </v-btn>
            <v-flex class="bold">21H 10 MIN</v-flex>
          </v-layout>
        </v-layout>

This would be a good example:

<a :href="href" class="short" target="_blank">Foo<a>
<a
  foo="a very long multi-tribute element that exceeds the max length"
  any
  other
  attr
  should
  be
  on="its own line"
>

---

For anybody interested in having the obove formatting working automatically, it’s achievable by deactivating the rule vue/max-attributes-per-line in .eslintrc with "vue/max-attributes-per-line": 0 and make sure you don’t have "vetur.format.defaultFormatter.html": "js-beautify-html" in your VSCode settings

[jak-kal]

For me, I find that splitting attributes into one-per-line decreases the overall readability of my markup. I favour readability and always try and make effective use of whitespace.

I’ve seen a few of my colleagues start writing this way - as per the docs - and I cannot stand it. Any more thoughts on this?

[phanan]

The reason we use

<a
  foo="a very long multi-tribute element that exceeds the max length"
  any
  other
  attr
  should
  be
  on="its own line"
>

in our codebase is because it’s quite simple to reason about (and effective, I’d say): either all attributes are on the same line (if the max length isn’t exceeded), or none of them. This applies for HTML, JS, and even backend structs alike.