feat: Add `svelte/consistent-attribute-lines` rule

[jacob-8]

Motivation

This rule is essentially the same as Anthony's recently published antfu/consistent-list-newline rule, but for element attributes in Svelte files. The purpose of it is to save spending time messing with whitespace. However I write the first attribute, the rest will automatically follow the pattern.

Description

Keep attributes on same line or each on their own line based on the first attributes position

Examples

<script>
</script>

<!-- ✓ GOOD -->
<div baz foo bar="2">Text</div>

<div
  baz
  foo
  bar="2">Text</div>

<div
  foo
  use:baz={{
    setting: 'value',
  }} />

<!-- ✗ BAD -->
<div baz
  foo
  bar="2">Text</div>

<div baz foo
  bar="2">Text</div>

<div
  baz foo bar="2">Text</div>

<div foo
  bar />

<div foo use:baz={{
    setting: 'value',
  }} />

<div foo use:baz={{
    setting: 'value',
  }} use:box />

From the rule tests at https://github.com/jacob-8/eslint-plugin-svelte-stylistic/blob/main/src/rules/consistent-attribute-lines.test.ts

Additional comments

I've already published it to npm as eslint-plugin-svelte-stylistic so I'm set, but I thought others might appreciate it so wanted to propose adding it here. What do you think? (rule 2 of 2, see the first at #590)

[ota-meshi]

Thank you for posting the issue.

First, I'm in favor of using ESLint to check code styles. Therefore, I agree that this plugin adds stylistic rules.
However, I think that can be checked by combining two rules.

https://sveltejs.github.io/eslint-plugin-svelte/rules/max-attributes-per-line/
https://sveltejs.github.io/eslint-plugin-svelte/rules/first-attribute-linebreak/

https://sveltejs.github.io/eslint-plugin-svelte/playground/#eJyVkL1OwzAUhV/lcpdKVSwLtlppJRASYxc2zJC0t8jCdSr7JoqI8hQMLDwdT4KTJrQwoHTy/TnH/o4b3BRbQoVp2Hhz4JV2cq4dAAVrHHcVQKjIMsmd8YFFxuxNXjKJKKDcU/aqQCN5X3iNyS/HPqtP+iAO5HuTgqeTARqN+9Ky6TYaFVwnGoNxL5bGyWLRPms3l9ql8gczNldCwNfnOzys1/cgRBymW1NBnr3Briji6ZcabzSuHqnmVMbd0ReLDjPquiNKj93/6kFWBlLRuGyaISkxR1gFsyqzJc36D2hbkOeIH3B3+4dw4stjmCmEU3Kf3TUiDtNLk11q63VFHe2YoC8tBVRN234DnYrWQw==

Please let me know if this is not the rule you are looking for. Also note that new rules must be designed to avoid conflicts with these.

[jacob-8]

I think that can be checked by combining two rules.

Great suggestion, but it's not what I'm looking for. What bothered me most about Prettier is that it only works off of fixed length parameters (lines are at most 80, 100, 120, characters long etc...). Many times something would be just how I want it and then Prettier takes 2 of the 10 lines that happen to be barely too long and then wraps them, breaking the uniformity with the other 8 lines. max-attributes-per-line is essentially the same problem in that it won't respect my intended formatting, but will simply count attributes and change things based on a fixed number. The desired count is different in different situations (for example, class="foo bar baz and-the-other-classes-that-will-make-this-really-long" is a much longer attribute than type="button"). What I want is a rule that lets me start things off how desired (the first attribute) and then the rest just automatically falls in line. Just like Anthony wrote in his consistent-list-newline rule: "It will check the newline style of the first property or item and apply to the rest of the properties or items."

Please feel free to let me know if you think what I'm describing is useful or if it would bloat the offerings you already have and lead to confusion. Like I said, I'm already set for myself, just wanting to share if helpful.

[ota-meshi]

I don't really understand. What rules are missing? I think the code you wrote at the top of this thread is checked well, as you can see in the demo.
What kind of code specifically do you think is not checked?

[jacob-8]

Ah, "singleline": 99 is the trick to getting the functionality I want. It is I who did not understand the possibilities of the max-attributes-per-line rule. I'll close this. Thanks for helping me understand better!