html-closing-bracket-newline.md

require or disallow a line break before tag's closing brackets (vue/html-closing-bracket-newline)

• ⚙️ This rule is included in "plugin:vue/strongly-recommended" and "plugin:vue/recommended".
• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

People have own preference about the location of closing brackets. This rule enforces a line break (or no line break) before tag's closing brackets.

<div
    id="foo"
    class="bar"> <!-- On the same line with the last attribute. -->
</div>

<div
    id="foo"
    class="bar"
> <!-- On the next line. -->
</div>

Rule Details

{
    "vue/html-closing-bracket-newline": ["error", {
        "singleline": "never",
        "multiline": "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 as the opening bracket.
  • "never" ... disallow line breaks before the closing bracket. This is the default.
  • "always" ... require one line break before the closing bracket.
• 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.
  • "always" ... require one line break before the closing bracket. This is the default.

Plus, you can use vue/html-indent rule to enforce indent-level of the closing brackets.

👎 Examples of incorrect code for this rule:

<!-- eslint html-closing-bracket-newline: "error" -->

<div id="foo" class="bar"
>

<div
    id="foo"
    class="bar">

👍 Examples of correct code for this rule:

<!-- eslint html-closing-bracket-newline: "error" -->

<div id="foo" class="bar">
<div
    id="foo"
    class="bar"
>

👎 Examples of incorrect code for { "multiline": "never" }:

<!-- eslint html-closing-bracket-newline: ["error", { multiline: never }] -->

<div
    id="foo"
    class="bar"
>

👍 Examples of correct code for { "multiline": "never" }:

<!-- html-closing-bracket-newline: ["error", { multiline: never }] -->

<div
    id="foo"
    class="bar">