feat: Add `svelte/brackets-same-line` rule

[jacob-8]

Motivation

I don't like brackets on their own line as it makes the code much longer and harder to read. It may be useful for editing but it's just messy overall. Sometimes use of VSCode's built-in formatter or projects that use to use prettier can have a lot of brackets on new lines. This rule makes it easy to clean things up.

Description

Keep closing brackets on the same line as the last attribute or the tag itself

Examples

<script>
</script>

<!-- ✓ GOOD -->
<div>Text</div>

<div title="foo">Text</div>

<div 
  bar 
  title="foo">Text</div>

<div>
  Text
</div>

<div />

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

<div
  >Text</div>

<div
  >
  Text</div>

<div>Text</div
  >

<div
  />

From the rule tests at https://github.com/jacob-8/eslint-plugin-svelte-stylistic/blob/main/src/rules/brackets-same-line.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 1 of 2, see second at #591)

[ota-meshi]

Thank you for posting the issue.

I think it's good to have rules that enforce that code style, but I think the rule you suggested is too opinionated. I think it would be good if the new rule could force line breaks by using options. I think the new rule will probably be similar to vue/html-closing-bracket-newline. What do you think?

[jacob-8]

Wonderful!

I think the new rule will probably be similar to vue/html-closing-bracket-newline.

Yes, it's opinionated because so far only I use it. Your suggestion to make it similar to the Vue rule is perfect. I will not have a chance to write is this week but will submit a PR further on. May I ask if I can make one deviation from their rule by making disallow lines breaks before the closing bracket the default in both cases?

Either way is fine with me though.

[ota-meshi]

I would like to match the default style of the rules to the default style of prettier-plugin-svelte as much as possible. So, it is probably best to set it to "never" by default.

[OJFord]

I think the multiline case probably differs and defaults to "always" because they, like me, think that it's more readable especially in the case of diffs. My preferred (multi-attribute) style is:

<!-- GOOD -->
<div
    bar
    title="foo"
>
    Text
</div>

(Ideally I might indent the attributes differently to the inner content, but that would be out of scope for this rule.)

There's nothing different about title that means it should get the closing tag and not bar, to me title="foo"> there is as weird as <div bar would be.

<!-- BAD -->
<div bar
    title="foo">

<div bar
    title="foo"
>

<div
    bar
    title="foo">

It's even worse perhaps, because it stops me being able to scan down the opening ~tag~ bracket indentation level to see where the attributes end and the inner content begins.

[Azuriru]

I've been searching for this for awhile, nearly went insane trying to find this exact rule. I vouch for it to be implemented! Prettier doesn't have a rule for this either, and I currently use eslint as a formatter so this would be really useful ❤️

[akodkod]

+1 for this one