multiline-html-element-content-newline.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/multiline-html-element-content-newline	require a line break before and after the contents of a multiline element

vue/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:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-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.

<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", ...INLINE_ELEMENTS],
        "allowEmptyLines": false
    }]
}

• ignoreWhenEmpty ... disables reporting when element has no content. default true
• ignores ... the configuration for element names to ignore line breaks style. default ["pre", "textarea", ...INLINE_ELEMENTS].
• allowEmptyLines ... if true, it allows empty lines around content. If you want to disallow multiple empty lines, use no-multiple-empty-lines in combination.
  default false

::: info All inline non void elements can be found here. :::

"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>

"allowEmptyLines": true

<template>
  <!-- ✓ GOOD -->
  <div>
    content
  </div>
  <div>

    content

  </div>

  <!-- ✗ BAD -->
  <div>content
    content</div>
</template>

📚 Further Reading

• no-multiple-empty-lines

🔍 Implementation

• Rule source
• Test source