first-attribute-linebreak.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/first-attribute-linebreak	enforce the location of first attribute	v8.0.0

vue/first-attribute-linebreak

enforce the location of first attribute

• ⚙️ This rule is included in all of "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/recommended".
• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

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>

👫 Related Rules

• vue/max-attributes-per-line

📚 Further Reading

• Style guide - Multi attribute elements

🚀 Version

This rule was introduced in eslint-plugin-vue v8.0.0

🔍 Implementation

• Rule source
• Test source