eslint-plugin-lodash-template

Appearance

lodash-template/html-content-newline ​

require or disallow a line break before and after HTML contents

  • ⚙️ This rule is included in "plugin:lodash-template/recommended-with-html" and "plugin:lodash-template/all".
  • 🔧 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 (or no line break) before and after HTML contents.

html
<% /* eslint "lodash-template/html-content-newline": "error" */ %>
<!-- ✓ GOOD -->
<div class="panel">content</div>

<div class="panel">
  content
</div>

<div
  class="panel"
>
  content
</div>

<!-- ✗ BAD -->
<div
  class="panel"
>
content
</div>

Options ​

json
{
  "lodash-template/html-content-newline": ["error", {
    "singleline": "ignore",
    "multiline": "always",
    "ignoreNames": ["pre", "textarea"]
  }]
}
  • singleline ... the configuration for single-line elements. It's a single-line element if startTag, endTag and contents are single-line.
    • "ignore" ... Don't enforce line breaks style before and after the contents. This is the default.
    • "never" ... disallow line breaks before and after the contents.
    • "always" ... require one line break before and after the contents.
  • multiline ... the configuration for multiline elements. It's a multiline element if startTag, endTag or contents are multiline.
    • "ignore" ... Don't enforce line breaks style before and after the contents.
    • "never" ... disallow line breaks before and after the contents.
    • "always" ... require one line break before and after the contents. This is the default.
  • ignoreNames ... the configuration for element names to ignore line breaks style.
    default ["pre", "textarea"]
html
<% /*eslint
  lodash-template/html-content-newline: ["error", {
    "singleline": "always",
    "multiline": "never"
  }]
*/ %>

<!-- ✓ GOOD -->
<div class="panel">
  content
</div>

<div
  class="panel"
>content</div>

<!-- ✗ BAD -->
<div class="panel">
content
</div>

<div
  class="panel"
>

  content

</div>

Implementation ​