# vue/block-tag-newline

enforce line breaks after opening and before closing block-level tags

# 📖 Rule Details

This rule enforces a line break (or no line break) after opening and before closing block tags.

<!-- ✓ GOOD --> <template><input></template> <script> export default {} </script>
Now loading...
<!-- ✗ BAD --> <template> <input></template> <script> export default {}</script>
Now loading...

# 🔧 Options

{
  "vue/block-tag-newline": ["error", {
    "singleline": "always" | "never" | "consistent" | "ignore",
    "multiline": "always" | "never" | "consistent" | "ignore",
    "maxEmptyLines": 0,
    "blocks": {
      "template": {
        "singleline": "always" | "never" | "consistent" | "ignore",
        "multiline": "always" | "never" | "consistent" | "ignore",
        "maxEmptyLines": 0,
      },
      "script": {
        "singleline": "always" | "never" | "consistent" | "ignore",
        "multiline": "always" | "never" | "consistent" | "ignore",
        "maxEmptyLines": 0,
      },
      "my-block": {
        "singleline": "always" | "never" | "consistent" | "ignore",
        "multiline": "always" | "never" | "consistent" | "ignore",
        "maxEmptyLines": 0,
      }
    }
  }]
}
  • singleline ... the configuration for single-line blocks.
    • "consistent" ... (default) requires consistent usage of line breaks for each pair of tags. It reports an error if one tag in the pair has a linebreak inside it and the other tag does not.
    • "always" ... require one line break after opening and before closing block tags.
    • "never" ... disallow line breaks after opening and before closing block tags.
  • multiline ... the configuration for multi-line blocks.
    • "consistent" ... requires consistent usage of line breaks for each pair of tags. It reports an error if one tag in the pair has a linebreak inside it and the other tag does not.
    • "always" ... (default) require one line break after opening and before closing block tags.
    • "never" ... disallow line breaks after opening and before closing block tags.
  • maxEmptyLines ... specifies the maximum number of empty lines allowed. default 0.
  • blocks ... specifies for each block name.

# { "singleline": "never", "multiline": "always" }

<!-- ✓ GOOD --> <template><input></template> <script> export default { } </script>
Now loading...
<!-- ✗ BAD --> <template> <input> </template> <script>export default { }</script>
Now loading...

# { "singleline": "always", "multiline": "always", "maxEmptyLines": 1 }

<!-- ✓ GOOD --> <template> <input> </template> <script> export default { } </script>
Now loading...
<!-- ✗ BAD --> <template> <input> </template> <script> export default { } </script>
Now loading...

# 🚀 Version

This rule was introduced in eslint-plugin-vue v7.1.0

# 🔍 Implementation

Last Updated: 12/24/2020, 2:51:18 AM