# san/attributes-order

enforce order of attributes

⚙️ This rule is included in "plugin:san/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 ordering of component attributes. The default order is:

LIST_RENDERING e.g. 's-for item in items'
CONDITIONALS e.g. 's-if', 's-else-if', 's-else'
GLOBAL e.g. 'id'
UNIQUE e.g. 'ref', 'key', 's-slot', 'slot'
OTHER_ATTR e.g. 'custom-prop="foo"', 's-bind={}', 'prop=""'
EVENTS e.g. 's-on="event"'

# the default order

<template>
  <!-- ✓ GOOD -->
  <div
    s-for="item in items"
    s-if="!visible"
    id="uniqueID"
    ref="header"
    my-prop="prop"
    on-click="functionCall"
  >
  </div>
  <div
    s-for="item in items"
    s-if="!visible"
    prop-one="{{prop}}"
    prop-two="{{prop}}"
    prop-three="{{prop}}"
    on-click="functionCall"
   >
  </div>
  <div
    prop-one="prop"
    prop-two="{{prop}}"
    prop-three="prop">
  </div>

  <!-- ✗ BAD -->
  <div
    ref="header"
    s-for="item in items"
    id="uniqueID"
    my-prop="prop"
    s-if="!visible"
    on-click="functionCall">
  </div>
</template>

Now loading...

# 🔧 Options

{
  "san/attributes-order": ["error", {
    "order": [
      "LIST_RENDERING",
      "CONDITIONALS",
      "GLOBAL",
      "UNIQUE",
      "OTHER_ATTR",
      "EVENTS"
    ],
    "alphabetical": false
  }]
}

# `"alphabetical": true`

<template>
  <!-- ✓ GOOD -->
    <div
      a-custom-prop="value"
      another-custom-prop="{{value}}"
      blue-color="{{false}}"
      boolean-prop
      class="foo"
      class="{{bar}}"
      z-prop="Z"
      on-[c]="functionCall"
      on-change="functionCall"
      on-click="functionCall"
      on-input="functionCall">
    </div>

  <!-- ✗ BAD -->
    <div
      z-prop="Z"
      a-prop="A">
    </div>

    <div
      on-input="bar"
      on-change="foo">
    </div>

    <div
      on-click="functionCall"
      on-[c]="functionCall">
    </div>

    <div
      z-prop="{{Z}}"
      a-prop="{{A}}">
    </div>

    <div
      class="{{foo}}"
      class="bar">
    </div>

</template>

Now loading...

# Custom orders

# `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`

<template>
  <!-- ✓ GOOD -->
  <div
    ref="header"
    prop-one="prop"
    prop-two="prop">
  </div>

  <!-- ✗ BAD -->
  <div
    ref="header"
    prop-one="prop">
  </div>
</template>

Now loading...

# `[['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`

<template>
  <!-- ✓ GOOD -->
  <div
    ref="header"
    prop-one="prop"
    prop-two="prop">
  </div>
  <div
    ref="header"
    prop-one="prop"
    prop-two="prop">
  </div>
</template>

Now loading...

# 🔍 Implementation

← san/singleline-html-element-content-newline san/component-tags-order →

# san/attributes-order

# 📖 Rule Details

# the default order

# 🔧 Options

# "alphabetical": true

# Custom orders

# ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']

# [['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']

# 🔍 Implementation

# `"alphabetical": true`

# `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`

# `[['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`