eslint-plugin-vue

外观

vue/attributes-order ​

强制属性顺序

  • ⚙️ 此规则包含在所有 "plugin:vue/vue3-recommended"、*.configs["flat/recommended"]、"plugin:vue/recommended" 和 *.configs["flat/vue2-recommended"] 中。
  • 🔧 命令行上的 --fix 选项可以自动修复此规则报告的一些问题。 命令行

📖 规则详情 ​

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

  • DEFINITION 例如 'is'、'v-is'
  • LIST_RENDERING 例如 'v-for item in items'
  • CONDITIONALS 例如 'v-if'、'v-else-if'、'v-else'、'v-show'、'v-cloak'
  • RENDER_MODIFIERS 例如 'v-once'、'v-pre'
  • GLOBAL 例如 'id'
  • UNIQUE 例如 'ref'、'key'
  • SLOT 例如 'v-slot'、'slot'。
  • TWO_WAY_BINDING 例如 'v-model'
  • OTHER_DIRECTIVES 例如 'v-custom-directive'
  • OTHER_ATTR 是 [ATTR_DYNAMIC, ATTR_STATIC, ATTR_SHORTHAND_BOOL] 的别名
    • ATTR_DYNAMIC 例如 'v-bind:prop="foo"'、':prop="foo"'
    • ATTR_STATIC 例如 'prop="foo"'、'custom-prop="foo"'
    • ATTR_SHORTHAND_BOOL 例如 'boolean-prop'
  • EVENTS 例如 '@click="functionCall"'、'v-on="event"'
  • CONTENT 例如 'v-text'、'v-html'

默认顺序 ​

正在加载...

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

正在加载...

🔧 选项 ​

json
{
  "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 ​

正在加载...

自定义顺序 ​

['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'] ​

正在加载...

📚 进一步阅读 ​

🚀 版本 ​

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

🔍 实现 ​