# san/singleline-html-element-content-newline
require a line break before and after the contents of a singleline 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 singleline element.
<template>
<!-- ✓ GOOD -->
<div attr>
content
</div>
<tr attr>
<td>
{{ data1 }}
</td>
<td>
{{ data2 }}
</td>
</tr>
<div attr>
<!-- comment -->
</div>
<!-- ✗ BAD -->
<div attr>content</div>
<tr attr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>
<div attr><!-- comment --></div>
</template>
# 🔧 Options
{
"san/singleline-html-element-content-newline": ["error", {
"ignoreWhenNoAttributes": true,
"ignoreWhenEmpty": true,
"ignores": ["pre", "textarea", ...INLINE_ELEMENTS]
}]
}
ignoreWhenNoAttributes
... allows having contents in one line, when given element has no attributes. defaulttrue
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]
.
TIP
All inline non void elements can be found here (opens new window).
# "ignoreWhenNoAttributes": true
<template>
<!-- ✗ BAD -->
<div attr>content</div>
<tr attr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>
<div attr><!-- comment --></div>
</template>
# "ignoreWhenNoAttributes": false
<template>
<!-- ✗ BAD -->
<div>content</div>
<tr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>
<div><!-- comment --></div>
</template>