vue/attributes-order

强制属性顺序

• ⚙️ 此规则包含在 "plugin:vue/recommended"、*.configs["flat/recommended"]、"plugin:vue/vue2-recommended" 和 *.configs["flat/vue2-recommended"] 中。

• 🔧命令行 上的 --fix 选项可以自动修复此规则报告的一些问题。

  ¥🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 规则详情

此规则旨在强制组件属性的排序。默认顺序在 Vue.js 样式指南 中指定，并且是：

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

• DEFINITION 例如 'is'、'v-is'

  ¥DEFINITION e.g. 'is', 'v-is'

• LIST_RENDERING 例如 'v-for item in items'

  ¥LIST_RENDERING e.g. 'v-for item in items'

• CONDITIONALS 例如 'v-if'、'v-else-if'、'v-else'、'v-show'、'v-cloak'

  ¥CONDITIONALS e.g. 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak'

• RENDER_MODIFIERS 例如 'v-once'、'v-pre'

  ¥RENDER_MODIFIERS e.g. 'v-once', 'v-pre'

• GLOBAL 例如 'id'

  ¥GLOBAL e.g. 'id'

• UNIQUE 例如 'ref'、'key'

  ¥UNIQUE e.g. 'ref', 'key'

• SLOT 例如 'v-slot'、'slot'。

  ¥SLOT e.g. 'v-slot', 'slot'.

• TWO_WAY_BINDING 例如 'v-model'

  ¥TWO_WAY_BINDING e.g. 'v-model'

• OTHER_DIRECTIVES 例如 'v-custom-directive'

  ¥OTHER_DIRECTIVES e.g. 'v-custom-directive'

• OTHER_ATTR [ATTR_DYNAMIC, ATTR_STATIC, ATTR_SHORTHAND_BOOL] 的别名：

  ¥OTHER_ATTR alias for [ATTR_DYNAMIC, ATTR_STATIC, ATTR_SHORTHAND_BOOL]:

  • ATTR_DYNAMIC 例如 'v-bind:prop="foo"'、':prop="foo"'

    ¥ATTR_DYNAMIC e.g. 'v-bind:prop="foo"', ':prop="foo"'

  • ATTR_STATIC 例如 'prop="foo"'、'custom-prop="foo"'

    ¥ATTR_STATIC e.g. 'prop="foo"', 'custom-prop="foo"'

  • ATTR_SHORTHAND_BOOL 例如 'boolean-prop'

    ¥ATTR_SHORTHAND_BOOL e.g. 'boolean-prop'

• EVENTS 例如 '@click="functionCall"'、'v-on="event"'

  ¥EVENTS e.g. '@click="functionCall"', 'v-on="event"'

• CONTENT 例如 'v-text'、'v-html'

  ¥CONTENT e.g. 'v-text', 'v-html'

默认顺序

¥the default order

Now loading...

请注意，v-bind="object" 语法被认为与下一个或上一个属性类别相同。

¥Note that v-bind="object" syntax is considered to be the same as the next or previous attribute categories.

Now loading...

🔧选项

¥🔧 Options

{
  "vue/attributes-order": ["error", {
    "order": [
      "DEFINITION",
      "LIST_RENDERING",
      "CONDITIONALS",
      "RENDER_MODIFIERS",
      "GLOBAL",
      ["UNIQUE", "SLOT"],
      "TWO_WAY_BINDING",
      "OTHER_DIRECTIVES",
      "OTHER_ATTR",
      "EVENTS",
      "CONTENT"
    ],
    "alphabetical": false
  }]
}

"alphabetical": true

Now loading...

自定义订单

¥Custom orders

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

Now loading...

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

Now loading...

📚扩展阅读

¥📚 Further Reading

• 样式指南 - 元素属性顺序

  ¥Style guide - Element attribute order

• 样式指南（适用于 v2） - 元素属性顺序

  ¥Style guide (for v2) - Element attribute order

🚀版本

¥🚀 Version

此规则在 eslint-plugin-vue v4.3.0 中引入

¥This rule was introduced in eslint-plugin-vue v4.3.0

🔍代码实现

¥🔍 Implementation

• 规则源

  ¥Rule source

• 测试源

  ¥Test source