vue/singleline-html-element-content-newline
require a line break before and after the contents of a singleline 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 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
{
"vue/singleline-html-element-content-newline": ["error", {
"ignoreWhenNoAttributes": true,
"ignoreWhenEmpty": true,
"ignores": ["pre", "textarea"]
}]
}
ignoreWhenNoAttributes... allows having contents in one line, when given element has no attributes. defaulttrueignoreWhenEmpty... disables reporting when element has no content. defaulttrueignores... the configuration for element names to ignore line breaks style.
default["pre", "textarea"]
"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>