multiline-html-element-content-newline.md

require a line break before and after the contents of a multiline element (vue/multiline-html-element-content-newline)

• ⚙️ This rule is included in "plugin:vue/strongly-recommended" and "plugin:vue/recommended".
• 🔧 The --fix option 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.

👎 Examples of incorrect code:

<div>multiline
  content</div>

<div
  attr
>multiline start tag</div>

<tr><td>multiline</td>
  <td>children</td></tr>

<div><!-- multiline
  comment --></div>

<div
></div>

👍 Examples of correct code:

<div>
  multiline
  content
</div>

<div
  attr
>
  multiline start tag
</div>

<tr>
  <td>multiline</td>
  <td>children</td>
</tr>

<div>
  <!-- multiline
       comment -->
</div>

<div
>
</div>

<div attr>singleline element</div>

🔧 Options

{
    "vue/multiline-html-element-content-newline": ["error", {
        "ignores": ["pre", "textarea"]
    }]
}

• ignores ... the configuration for element names to ignore line breaks style.
  default ["pre", "textarea"]

👍 Examples of correct code:

/* eslint vue/multiline-html-element-content-newline: ["error", { "ignores": ["VueComponent", "pre", "textarea"]}] */

<VueComponent>multiline
content</VueComponent>

<VueComponent><span
  class="bold">For example,</span>
Defines the Vue component that accepts preformatted text.</VueComponent>