ESLint setting to support multiple attributes on 1 line in HTML

[ReneDrie]

It's default practice to put multiple attributes on a single line (if they fit within the line length) for HTML attributes. But currently this is disabled, so you always need to put all attributes on a new line.

We can add the following rule to ESLint to enable multiple attributes if they fit in the line length:
'vue/max-attributes-per-line': [2, { 'singleline': 999, 'multiline': { 'max': 1, 'allowFirstLine': false, }, }],

The only thing here is that when you do go over the line length, you'll have to modify all attributes. But maybe prettier can fix this?

[ThaNarie]

If it's solvable by prettier, then the lint rule could just be disabled, right?

[ReneDrie]

If it's solvable by prettier, then the lint rule could just be disabled, right?

I'm not sure if this is also solvable by prettier, might be good to investigate.

[hjeti]

We don't use prettier for vue files. SInce a few months it has support for vue but it did some weird things when I ran it on a vue file. I can check if they have updated the formatting or otherwise make the change proposed by rene.

[gianko]

I really like this rule.

You can see all the attr right there, also is easy to add new, copy/paste if they are all in different lines.

[ReneDrie]

That was indeed the case. For consistency this right might be great. But native HTML rules always said that it's allowed to have multiple rules on a single line, as long as it fit's without the line length