sveltejs / eslint-plugin-svelte

ESLint plugin for Svelte using AST
https://sveltejs.github.io/eslint-plugin-svelte/
MIT License
305 stars 38 forks source link

New rule: require-multiline-attribute-newline #362

Open OJFord opened 1 year ago

OJFord commented 1 year ago

Motivation

More readable multiline attribute blocks.

Description

When an attribute gets long, particularly spanning multiple lines, IMO it's not very readable to have them (start) on the same line as the prop or directive.

Examples

<!-- ✓ GOOD -->
<Foo
  on:click={
    () => {
      foo = bar
    }
  }
/>

<!-- ✗ BAD -->
<Foo
  on:click={() => {
    foo = bar
  }}
/>

Additional comments

No response

ota-meshi commented 1 year ago

Thanks for the rule suggestions. That's an interesting rule. The new rule may conflict with the existing mustache-spacing rule, so I think the check by the mustache-spacing should be loosened. https://sveltejs.github.io/eslint-plugin-svelte/rules/mustache-spacing/

Also, I think the new rule should allow some options to disallow newlines. So I think it's a good idea to name the new rule something like mustache-newline.

OJFord commented 1 year ago

I think your naming suggestion covers it too - but just to add it occurred to me that this is just as relevant for templated text content:

<!--  ✓ GOOD -->
<Foo>
  {
    generateSomething({
      param1: 123,
      param2: 456,
    })
  }
</Foo>

<!-- ✗ BAD -->
<Foo>
  {generateSomething({
      param1: 123,
      param2: 456,
  })}
</Foo>