Skip to content

Latest commit

 

History

History
160 lines (122 loc) · 4.23 KB

max-attributes-per-line.md

File metadata and controls

160 lines (122 loc) · 4.23 KB
Raw
pageClass sidebarDepth title description since
rule-details
0
vue/max-attributes-per-line
enforce the maximum number of attributes per line
v3.12.0

vue/max-attributes-per-line

enforce the maximum number of attributes per line

  • ⚙️ 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.

Limits the maximum number of attributes/properties per line to improve readability.

📖 Rule Details

This rule aims to enforce a number of attributes per line in templates. It checks all the elements in a template and verifies that the number of attributes per line does not exceed the defined maximum. An attribute is considered to be in a new line when there is a line break between two attributes.

There is a configurable number of attributes that are acceptable in one-line case (default 1), as well as how many attributes are acceptable per line in multi-line case (default 1).

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

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

🔧 Options

{
  "vue/max-attributes-per-line": ["error", {
    "singleline": {
      "max": 1,
      "allowFirstLine": true
    },      
    "multiline": {
      "max": 1,
      "allowFirstLine": false
    }
  }]
}
  • singleline.max (number) ... The number of maximum attributes per line when the opening tag is in a single line. Default is 1.
  • singleline.allowFirstLine (boolean) ... If true, it allows attributes on the same line as that tag name. Default is true.
  • multiline.max (number) ... The max number of attributes per line when the opening tag is in multiple lines. Default is 1. This can be { multiline: 1 } instead of { multiline: { max: 1 }} if you don't configure allowFirstLine property.
  • multiline.allowFirstLine (boolean) ... If true, it allows attributes on the same line as that tag name. Default is false.

"singleline": 3

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

  <!-- ✗ BAD -->
  <MyComponent lorem="1" ipsum="2" dolor="3" sit="4" />
</template>

"singleline": 1, "allowFirstLine": false

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

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

"multiline": 2

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

  <!-- ✗ BAD -->
  <MyComponent
    lorem="1" ipsum="2" dolor="3"
    sit="4"
  />
</template>

"multiline": 1, "allowFirstLine": true

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

📚 Further Reading

🚀 Version

This rule was introduced in eslint-plugin-vue v3.12.0

🔍 Implementation