# san/multiline-html-element-content-newline
require a line break before and after the contents of a multiline element
- ⚙️ This rule is included in all of
"plugin:san/strongly-recommended"
and"plugin:san/recommended"
. - 🔧 The
--fix
option on the command line (opens new window) 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
{
"san/multiline-html-element-content-newline": ["error", {
"ignoreWhenEmpty": true,
"ignores": ["pre", "textarea", ...INLINE_ELEMENTS],
"allowEmptyLines": false
}]
}
ignoreWhenEmpty
... disables reporting when element has no content. defaulttrue
ignores
... the configuration for element names to ignore line breaks style. default["pre", "textarea", ...INLINE_ELEMENTS]
.allowEmptyLines
... iftrue
, it allows empty lines around content. If you want to disallow multiple empty lines, use no-multiple-empty-lines (opens new window) in combination.
defaultfalse
TIP
All inline non void elements can be found here (opens new window).
# "ignores": ["SanComponent", "pre", "textarea"]
<template>
<!-- ✓ GOOD -->
<SanComponent>multiline
content</SanComponent>
<pre>some
content</pre>
<SanComponent><span
class="bold">For example,</span>
Defines the San component that accepts preformatted text.</SanComponent>
</template>
# "allowEmptyLines": true
<template>
<!-- ✓ GOOD -->
<div>
content
</div>
<div>
content
</div>
<!-- ✗ BAD -->
<div>content
content</div>
</template>