# san/multiline-html-element-content-newline

要求在多行元素的内容前后换行

  • ⚙️ 此规则包含于 "plugin:san/strongly-recommended""plugin:san/recommended".
  • 🔧 命令行 (opens new window)中的--fix选项可以自动修复此规则报告的一些问题。

# 📖 规则细节

此规则要求在多行元素的内容前后强制换行。

<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>
Now loading...

# 🔧 配置

{
    "san/multiline-html-element-content-newline": ["error", {
        "ignoreWhenEmpty": true,
        "ignores": ["pre", "textarea", ...INLINE_ELEMENTS],
        "allowEmptyLines": false
    }]
}
  • ignoreWhenEmpty ... 当元素没有内容时禁止报错。 默认为true

  • igonres ... 忽略换行符的元素名称的配置。 默认["pre", "textarea", ...INLINE_ELEMENTS]

  • allowEmptyLines ... 如果为 true,则它允许内容周围有空行。 如果您想禁止多个空行,请结合使用no-multiple-empty-lines (opens new window)。默认false

TIP

所有INLINE_ELEMENTS都可以在这里 (opens new window)找到 .

# "ignores": ["SanComponent", "pre", "textarea"]

<template> <!-- ✓ GOOD --> <SanComponent>multiline content</SanComponent> <pre>some content</pre> <SanComponent><span class="bold">For example,</span> Defines the San component that accepts preformatted text.</SanComponent> </template>
Now loading...

# "allowEmptyLines": true

<template> <!-- ✓ GOOD --> <div> content </div> <div> content </div> <!-- ✗ BAD --> <div>content content</div> </template>
Now loading...

# 📚 深入阅读

# 🔍 实现