Skip to content

Latest commit

 

History

History
102 lines (68 loc) · 2.43 KB

singleline-html-element-content-newline.md

File metadata and controls

102 lines (68 loc) · 2.43 KB
Raw

require a line break before and after the contents of a singleline element (vue/singleline-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 singleline element.

👎 Examples of incorrect code:

<div attr>content</div>

<tr attr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>

<div attr><!-- comment --></div>

👍 Examples of correct code:

<div attr>
  content
</div>

<tr attr>
  <td>
    {{ data1 }}
  </td>
  <td>
    {{ data2 }}
  </td>
</tr>

<div attr>
  <!-- comment -->
</div>

🔧 Options

{
  "vue/singleline-html-element-content-newline": ["error", {
    "ignoreWhenNoAttributes": true,
    "ignores": ["pre", "textarea"]
  }]
}
  • ignoreWhenNoAttributes ... allows having contents in one line, when given element has no attributes. default true
  • ignores ... the configuration for element names to ignore line breaks style.
    default ["pre", "textarea"]

👎 Examples of incorrect code for {ignoreWhenNoAttributes: false}:

/* eslint vue/singleline-html-element-content-newline: ["error", { "ignoreWhenNoAttributes": false}] */

<div>content</div>

<tr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>

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

👍 Examples of correct code for {ignoreWhenNoAttributes: true} (default):

/* eslint vue/singleline-html-element-content-newline: ["error", { "ignoreWhenNoAttributes": true}] */

<div>content</div>

<tr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>

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

👎 Examples of incorrect code for {ignoreWhenNoAttributes: true} (default):

/* eslint vue/singleline-html-element-content-newline: ["error", { "ignoreWhenNoAttributes": true}] */

<div attr>content</div>

<tr attr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>

<div attr><!-- comment --></div>

👍 Examples of correct code for ignores:

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

<VueComponent>content</VueComponent>

<VueComponent attr><span>content</span></VueComponent>