Skip to content

Latest commit

 

History

History
133 lines (114 loc) · 3.08 KB

attributes-order.md

File metadata and controls

133 lines (114 loc) · 3.08 KB
Raw

enforce order of attributes (vue/attributes-order)

  • ⚙️ This rule is included in "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 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'
  • TWO_WAY_BINDING ex: 'v-model'
  • OTHER_DIRECTIVES ex: 'v-custom-directive'
  • OTHER_ATTR ex: 'custom-prop="foo"', 'v-bind:prop="foo"', ':prop="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"
  my-prop="prop"
  @click="functionCall"
  v-text="textContent">
</div>
<div
  v-for="item in items"
  v-if="!visible"
  prop-one="prop"
  :prop-two="prop"
  prop-three="prop"
  @click="functionCall"
  v-text="textContent">
</div>
<div
  prop-one="prop"
  :prop-two="prop"
  prop-three="prop">
</div>

👎 Examples of incorrect code`:

<div
  ref="header"
  v-for="item in items"
  v-once
  id="uniqueID"
  v-model="headerData"
  my-prop="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: ['DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', ['BINDING', 'OTHER_ATTR'], 'EVENTS', 'CONTENT'] }] -->
<div
  is="header"
  prop-one="prop"
  :prop-two="prop">
</div>
<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
<div
  prop-one="prop"
  prop-two="prop"
  is="header">
</div>
<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
<div
  ref="header"
  is="header"
  prop-one="prop"
  prop-two="prop">
</div>

👎 Examples of incorrect code with custom order`:

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

Related links