eslint-plugin-san

# san/attributes-order

要求属性顺序

  • ⚙️ 此规则包含于 "plugin:san/recommended"。

  • 🔧命令行 (opens new window)中的--fix选项可以自动修复此规则报告的一些问题。

# 📖 规则细节

此规则目的是强制对组件属性进行排序。 默认顺序是：

  • 列表渲染属性 例如. 's-for item in items'
  • 条件属性 例如. 's-if', 's-else-if', 's-else'
  • 全局属性 例如. 'id'
  • 特殊属性 例如. 'ref', 'key', 's-slot', 'slot'
  • 其他属性 例如. 'custom-prop="foo"', 's-bind={}', 'prop=""'
  • 事件 例如. 's-on="event"'

# 默认顺序

<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...

# 🔧 配置

{
  "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...

# 自定义顺序

# ['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...

# 🔍 实现

← san/component-tags-order →