Skip to content

html-closing-bracket-newline.md

Latest commit

 

History

History
145 lines (112 loc) · 3.8 KB

html-closing-bracket-newline.md

File metadata and controls

145 lines (112 loc) · 3.8 KB
pageClass rule-details
sidebarDepth 0
title vue/html-closing-bracket-newline
description require or disallow a line break before tag's closing brackets
since v4.1.0

vue/html-closing-bracket-newline

require or disallow a line break before tag's closing brackets

  • ⚙️ This rule is included in the following preset configs:
    • *.configs["flat/strongly-recommended"]
    • *.configs["flat/vue2-strongly-recommended"]
    • *.configs["flat/recommended"]
    • *.configs["flat/vue2-recommended"]
    • "plugin:vue/strongly-recommended"
    • "plugin:vue/vue2-strongly-recommended"
    • "plugin:vue/recommended"
    • "plugin:vue/vue2-recommended"
  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

People have their own preference about the location of closing brackets. This rule enforces a line break (or no line break) before tag's closing brackets.

<div
  id="foo"
  class="bar"> <!-- On the same line with the last attribute. -->
</div>

<div
  id="foo"
  class="bar"
> <!-- On the next line. -->
</div>

📖 Rule Details

This rule aims to warn the right angle brackets which are at the location other than the configured location.

<template>
  <!-- ✓ GOOD -->
  <div id="foo" class="bar">
  <div
    id="foo"
    class="bar"
  >

  <!-- ✗ BAD -->
  <div id="foo" class="bar"
  >
  <div
    id="foo"
    class="bar">
</template>

🔧 Options

{
  "vue/html-closing-bracket-newline": [
    "error",
    {
      "singleline": "never",
      "multiline": "always",
      "selfClosingTag": {
        "singleline": "never",
        "multiline": "always"
      }
    }
  ]
}
  • singleline ("never" by default) ... the configuration for single-line elements. It's a single-line element if the element does not have attributes or the last attribute is on the same line as the opening bracket.
  • multiline ("always" by default) ... the configuration for multiline elements. It's a multiline element if the last attribute is not on the same line of the opening bracket.
  • selfClosingTag.singleline ... the configuration for single-line self closing elements.
  • selfClosingTag.multiline ... the configuration for multiline self closing elements.

Every option can be set to one of the following values:

  • "always" ... require one line break before the closing bracket.
  • "never" ... disallow line breaks before the closing bracket.

If selfClosingTag is not specified, the singleline and multiline options are inherited for self-closing tags.

Plus, you can use vue/html-indent rule to enforce indent-level of the closing brackets.

"multiline": "never"

<template>
  <!-- ✓ GOOD -->
  <div
    id="foo"
    class="bar">

  <!-- ✗ BAD -->
  <div
    id="foo"
    class="bar"
  >
</template>

"selfClosingTag": { "multiline": "always" }

<template>
  <!-- ✓ GOOD -->
  <MyComponent
      :foo="foo"
  />

  <!-- ✗ BAD -->
  <MyComponent
      :foo="foo" />
</template>

🚀 Version

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

🔍 Implementation