vue/multiline-html-element-content-newline
require a line break before and after the contents of a multiline element
- ⚙️ This rule is included in
"plugin:vue/strongly-recommended"and"plugin:vue/recommended". - 🔧 The
--fixoption on the command line can automatically fix some of the problems reported by this rule.
📖 Rule Details
This rule enforces a line break before and after the contents of a multiline element.
<template>
<!-- ✓ GOOD -->
<div>
multiline
content
</div>
<pre>some
content</pre>
<div
attr
>
multiline start tag
</div>
<table>
<tr>
<td>multiline</td>
<td>children</td>
</tr>
</table>
<div>
<!-- multiline
comment -->
</div>
<div
>
</div>
<div attr>singleline element</div>
<!-- ✗ BAD -->
<div>multiline
content</div>
<div
attr
>multiline start tag</div>
<table><tr><td>multiline</td>
<td>children</td></tr></table>
<div><!-- multiline
comment --></div>
<div
></div>
</template>
🔧 Options
{
"vue/multiline-html-element-content-newline": ["error", {
"ignoreWhenEmpty": true,
"ignores": ["pre", "textarea"]
}]
}
ignoreWhenEmpty... disables reporting when element has no content. defaulttrueignores... the configuration for element names to ignore line breaks style.
default["pre", "textarea"]
"ignores": ["VueComponent", "pre", "textarea"]
<template>
<!-- ✓ GOOD -->
<VueComponent>multiline
content</VueComponent>
<pre>some
content</pre>
<VueComponent><span
class="bold">For example,</span>
Defines the Vue component that accepts preformatted text.</VueComponent>
</template>