Rule Proposal vue/closing-bracket-location

[mikegreiling]

Please describe what the rule should do:

Provide a template rule similar to react/jsx-closing-bracket-location for vue templates.

This rule would govern the indentation style for the closing bracket of html tags within vue components when a tag spans multiple lines. (single-line tags are fine)

What category of rule is this? (place an "X" next to just one item)

[X] Enforces code style
[ ] Warns about a potential error
[ ] Suggests an alternate way of doing something
[ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

Configuration

'vue/closing-bracket-location': ['tag-aligned' | 'line-aligned' | 'after-props' | 'props-aligned']

Examples:

The following would not produce errors:

// 'vue/closing-bracket-location': [1, 'line-aligned']

<my-component
  really-long-param="foo"
  another-really-long-param="bar"
/>

Foo: <my-component
  really-long-param="foo"
  another-really-long-param="bar"
/>

<my-other-component
  really-long-param="foo"
  another-really-long-param="bar"
>
  Hello World!
</my-other-component>


// 'vue/closing-bracket-location': [1, 'tag-aligned']

<my-component
  really-long-param="foo"
  another-really-long-param="bar"
/>

Foo: <my-component
       really-long-param="foo"
       another-really-long-param="bar"
     />

<my-other-component
  really-long-param="foo"
  another-really-long-param="bar"
>
  Hello World!
</my-other-component>


// 'vue/closing-bracket-location': [1, 'after-props']

<my-component
  really-long-param="foo"
  another-really-long-param="bar" />

<my-other-component
  really-long-param="foo"
  another-really-long-param="bar">
  Hello World!
</my-other-component>


// 'vue/closing-bracket-location': [1, 'props-aligned']

<my-component
  really-long-param="foo"
  another-really-long-param="bar"
  />

<my-other-component
  really-long-param="foo"
  another-really-long-param="bar"
  >
  Hello World!
</my-other-component>

[filipalacerda]

There is some discussion regarding this in #46 (comment) and I believe there is already some wip in #145

[mysticatea]

Thank you for this proposal.

Yes, vue/html-indent rule will validate the indentation of closing brackets since it's indentation. It has the option for the location of the closing brackets: https://github.com/vuejs/eslint-plugin-vue/pull/145/files#diff-242461476a3b8404612d04fe8d37ac86R37
So we need to enforce line break style at the closing brackets for this purpose.

My proposal is:

{
    "vue/html-closing-bracket-newline": ["error", {
        "singleline": "never" | "always",
        "multiline": "never" | "always"
    }]
}

• singleline ... the configuration for single-line elements. It's a single-line element if the element does not have attributes or the last attribute is on the same line of the opening bracket.
  • "never" ... disallow line breaks before the closing bracket of elements. This is the default.
  • "always" ... require one line break before the closing bracket of elements.
• multiline ... the configuration for multiline elements. It's a multiline element if the last attribute is not on the same line of the opening bracket.
  • "never" ... disallow line breaks before the closing bracket of elements. This is the default.
  • "always" ... require one line break before the closing bracket of elements.

Examples:

/* eslint vue/html-closing-bracket-newline: error */

// VALID:
<div>
<div id="" class=""/>
<div id="" class="" />
<div 
    id="" 
    class="" />

// INVALID
<div
>
<div id="" class=""
/>
<div 
    id="" 
    class=""
/>
<div 
    id="" 
    class=""
    />

/* eslint vue/html-closing-bracket-newline: [error, { multiline: always }] */

// VALID:
<div>
<div id="" class=""/>
<div id="" class="" />
<div 
    id="" 
    class="" 
/>
<div 
    id="" 
    class="" 
    />

// INVALID
<div
>
<div id="" class=""
/>
<div 
    id="" 
    class=""/>
<div 
    id="" 
    class="" />

[michalsnik]

I like both proposals, but in your example @mysticatea if the indent rule is disabled this rule would most likely not serve its purpose. I'm not sure though if it's possible to make both rules independent without introducing any false positives.

[mysticatea]

At first, I apologize that I'm inactive while a long time.

@michalsnik It's the same thing for all core rules about line-breaks such as array-bracket-newline. In core rules, the rule which auto-fixes line-breaks does not consider indentation and line-break character type (\r\n or \n) because indent rule and linebreak-style rule handle it. ESLint policy seems to hate the overlapping of responsibility.