Skip to content

Files

Latest commit

 

History

History
145 lines (113 loc) · 2.9 KB

first-attribute-linebreak.md

File metadata and controls

145 lines (113 loc) · 2.9 KB

Pattern: Inconsistent location for the first attribute

Issue: -

Description

This rule aims to enforce a consistent location for the first attribute.

<template>
  <!-- ✓ GOOD -->
  <MyComponent lorem="1"/>
  <MyComponent lorem="1" ipsum="2"/>
  <MyComponent
    lorem="1"
    ipsum="2"
  />

  <!-- ✗ BAD -->
  <MyComponent lorem="1"
               ipsum="2"/>
</template>

Options

{
  "vue/first-attribute-linebreak": ["error", {
    "singleline": "ignore",
    "multiline": "below"
  }]
}
  • singleline ... The location of the first attribute when the attributes on single line. Default is "ignore".
    • "below" ... Requires a newline before the first attribute.
    • "beside" ... Disallows a newline before the first attribute.
    • "ignore" ... Ignores attribute checking.
  • multiline ... The location of the first attribute when the attributes span multiple lines. Default is "below".
    • "below" ... Requires a newline before the first attribute.
    • "beside" ... Disallows a newline before the first attribute.
    • "ignore" ... Ignores attribute checking.

"singleline": "beside"

<template>
  <!-- ✓ GOOD -->
  <MyComponent lorem="1"/>
  <MyComponent lorem="1" ipsum="2"/>

  <!-- ✗ BAD -->
  <MyComponent
    lorem="1"/>
  <MyComponent
    lorem="1" ipsum="2"
  />
</template>

"singleline": "below"

<template>
  <!-- ✓ GOOD -->
  <MyComponent
    lorem="1"/>
  <MyComponent
    lorem="1" ipsum="2"
  />

  <!-- ✗ BAD -->
  <MyComponent lorem="1"/>
  <MyComponent lorem="1" ipsum="2"/>
</template>

"multiline": "beside"

<template>
  <!-- ✓ GOOD -->
  <MyComponent lorem="1"
               ipsum="2"/>
  <MyComponent :lorem="{
                 a: 1
               }"/>

  <!-- ✗ BAD -->
  <MyComponent
    lorem="1"
    ipsum="2"/>
  <MyComponent
    :lorem="{
      a: 1
    }"/>
</template>

"multiline": "below"

<template>
  <!-- ✓ GOOD -->
  <MyComponent
    lorem="1"
    ipsum="2"/>
  <MyComponent
    :lorem="{
      a: 1
    }"/>

  <!-- ✗ BAD -->
  <MyComponent lorem="1"
               ipsum="2"/>
  <MyComponent :lorem="{
                 a: 1
               }"/>
</template>

Further Reading