max-attributes-per-line defaults to "singleline: 1", should be 3 according to docs

[tiltec]

Tell us about your environment

• ESLint Version: any
• eslint-plugin-vue Version: master
• Node Version: any

What did you do? Please include the actual source code causing the issue.

I use the strongly-recommended rule that enables max-attributes-per-line. It should default to 3 attributes in the singleline case, according to the docs:

There is a configurable number of attributes that are acceptable in one-line case (default 3), as well as how many attributes are acceptable per line in multi-line case (default 1).

This should be correct:

    <div v-for="item of items" :key="item.id">
      {{ item.name }}
    </div>

There's also a docs inconsistency, as this code is given as incorrect in the docs:

<MyComponent lorem="1" ipsum="2"/>

What did you expect to happen?

Don't get a lint error.

What actually happened?

Got a lint error.

Also noticed by @michalsnik in #77 (comment)

[tiltec]

On the other hand, the Vue Style Guide is quite clear that multiple attributes should go on newlines.

So the current default behavior seems correct in this regard, only the docs need updating.

I personally would like to see 3 allowed attributes in the single line case, but I would succumb to the official vue style guide in this regard.

[michalsnik]

Hey @tiltec, thanks for posting this. Now this topic will have it's proper attention :)

What do you think about this @chrisvfritz? You probably missed my proposition in bunch of other messages in the original issue :D If we're going to change anything here, it has to start with the StyleGuide, so we can align with our source of truth :)

[chrisvfritz]

Since the number of max attributes really depends on the length of those attributes, I think one per line is the only bikeshed-proof choice - unless we include another option to specify max columns before wrapping. On a related note: when Prettier supports HTML, it'll wrap according to max columns. This is in the works, so my preference would probably be to wait for Prettier to take care of it for us, then release a prettier ruleset to disable any rules that overlap with Prettier.

[mysticatea]

History:

1. It was 3 at first.
2. It was changed to 1 at 4.0.0 and forgotten to change the doc.

So I think it's a document issue.

As a side note, I think that we can use prettier from this plugin as similar to https://github.com/prettier/eslint-plugin-prettier if it's pretty (though I have not used prettier).

[chrisvfritz]

Yeah, I agree it's a documentation issue - sorry if I didn't make that clear. 😅

I'm not sure about using Prettier within this plugin though. Many in the Vue community make ESLint part of their Webpack build process, immediately failing if there's an error. For these users, immediately halting a build on a formatting issue would probably be very frustrating.

I think the strategies of eslint-config-prettier and stylelint-config-prettier are more flexible, so that no matter how Prettier is included in a project, we have a patch ruleset that will avoid any conflicts, deferring to Prettier wherever there's overlap.

[michalsnik]

Okay, I agree @chrisvfritz. I just wanted to point that it would be good to consider more attributes in one line as it's kind of a common scenario, and I'm also used to change default setting of this rule in each project I'm working on to accept max 3 attrs in one line :)

I'll update docs for now, so they're aligned with the style guide and we can observe if more people will also expect different defaults, if yes - we can iterate the style guide then. WDYT?

[chrisvfritz]

I'm not opposed to changing the default to more than 1 attribute per line, but we'd need to introduce a max columns (i.e. line length) before going multiline - and once we go multiline, I'd want to again require only 1 attribute per line.

The reason is that without a max columns constraint, some attributes will be too long for some people, which means the rule will have failed from preventing us from bikeshedding. 😂

Does that make sense?

[rzaharenkov]

I am sorry but I think 1 is to strict default. It make my templates stretched in vertical dimension and I need to scroll up and down any time. IMHO 3 make much more sense.

[rzaharenkov]

BTW, example in vue.js official guide doesn't fit this rule.