Skip to content

Latest commit

 

History

History
116 lines (100 loc) · 2.37 KB

attributes-order.md

File metadata and controls

116 lines (100 loc) · 2.37 KB
Raw

enforce order of attributes (vue/attributes-order)

  • ⚙️ This rule is included in "plugin:vue/recommended".

📖 Rule Details

This rule aims to enforce ordering of component attributes. The default order is specified in the Vue styleguide and is:

  • DEFINITION ex: 'is'
  • LIST_RENDERING ex: 'v-for item in items'
  • CONDITIONALS ex: 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak'
  • RENDER_MODIFIERS ex: 'v-once', 'v-pre'
  • GLOBAL ex: 'id'
  • UNIQUE ex: 'ref', 'key', 'slot'
  • BINDING ex: 'v-model', 'v-bind', ':property="foo"'
  • OTHER_ATTR ex: 'customProp="foo"'
  • EVENTS ex: '@click="functionCall"', 'v-on="event"'
  • CONTENT ex: 'v-text', 'v-html'

👍 Examples of correct code`:

<div
  is="header"
  v-for="item in items"
  v-if="!visible"
  v-once
  id="uniqueID"
  ref="header"
  v-model="headerData"
  myProp="prop"
  @click="functionCall"
  v-text="textContent">
</div>
<div
  v-for="item in items"
  v-if="!visible"
  propOne="prop"
  propTwo="prop"
  propThree="prop"
  @click="functionCall"
  v-text="textContent">
</div>
<div
  propOne="prop"
  propTwo="prop"
  propThree="prop">
</div>

👎 Examples of incorrect code`:

<div
  ref="header"
  v-for="item in items"
  v-once id="uniqueID"
  v-model="headerData"
  myProp="prop"
  v-if="!visible"
  is="header"
  @click="functionCall"
  v-text="textContent">
</div>

order

Specify custom order of attribute groups

👍 Examples of correct code with custom order`:

<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
<div
  propOne="prop"
  propTwo="prop"
  is="header">
</div>
<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
<div
  ref="header"
  is="header"
  propOne="prop"
  propTwo="prop">
</div>

👎 Examples of incorrect code with custom order`:

<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
<div
  ref="header"
  propOne="prop"
  is="header">
</div>