eslint-plugin-vue

# 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 (opens new window) 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>
Now loading...

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

# "singleline": "below"

<template> <!-- ✓ GOOD --> <MyComponent lorem="1"/> <MyComponent lorem="1" ipsum="2" /> <!-- ✗ BAD --> <MyComponent lorem="1"/> <MyComponent lorem="1" ipsum="2"/> </template>
Now loading...

# "multiline": "beside"

<template> <!-- ✓ GOOD --> <MyComponent lorem="1" ipsum="2"/> <MyComponent :lorem="{ a: 1 }"/> <!-- ✗ BAD --> <MyComponent lorem="1" ipsum="2"/> <MyComponent :lorem="{ a: 1 }"/> </template>
Now loading...

# "multiline": "below"

<template> <!-- ✓ GOOD --> <MyComponent lorem="1" ipsum="2"/> <MyComponent :lorem="{ a: 1 }"/> <!-- ✗ BAD --> <MyComponent lorem="1" ipsum="2"/> <MyComponent :lorem="{ a: 1 }"/> </template>
Now loading...

# 📚 Further Reading

# 🚀 Version

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

# 🔍 Implementation

← vue/html-closing-bracket-newline →