# vue/html-closing-bracket-newline
require or disallow a line break before tag's closing brackets
- ⚙️ This rule is included in all of
"plugin:vue/vue3-strongly-recommended","plugin:vue/strongly-recommended","plugin:vue/vue3-recommended"and"plugin:vue/recommended". - 🔧 The
--fixoption on the command line (opens new window) can automatically fix some of the problems reported by this rule.
People have their 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
This rule aims to warn the right angle brackets which are at the location other than the configured location.
<template>
<!-- ✓ GOOD -->
<div id="foo" class="bar">
<div
id="foo"
class="bar"
>
<!-- ✗ BAD -->
<div id="foo" class="bar"
>
<div
id="foo"
class="bar">
</template>
# 🔧 Options
{
"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"(default) ... disallow line breaks before the closing bracket."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"(default) ... require one line break before the closing bracket.
Plus, you can use vue/html-indent rule to enforce indent-level of the closing brackets.
# "multiline": "never"
<template>
<!-- ✓ GOOD -->
<div
id="foo"
class="bar">
<!-- ✗ BAD -->
<div
id="foo"
class="bar"
>
</template>
# 🚀 Version
This rule was introduced in eslint-plugin-vue v4.1.0