vue/attribute-hyphenation

enforce attribute naming style on custom components in template

• ⚙️ This rule is included in all of "plugin:vue/vue3-strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/strongly-recommended", *.configs["flat/vue2-strongly-recommended"], "plugin:vue/vue3-recommended", *.configs["flat/recommended"], "plugin:vue/recommended" and *.configs["flat/vue2-recommended"].
• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule enforces using hyphenated attribute names on custom components in Vue templates.

🔧 Options

{
  "vue/attribute-hyphenation": ["error", "always" | "never", {
    "ignore": [],
    "ignoreTags": []
  }]
}

Default casing is set to always. By default the following attributes are ignored: data-, aria-, slot-scope, and all the SVG attributes with either an upper case letter or an hyphen.

• "always" (default) ... Use hyphenated attribute name.
• "never" ... Don't use hyphenated attribute name.
• "ignore" ... Array of attribute names that don't need to follow the specified casing.
• "ignoreTags" ... Array of tag names whose attributes don't need to follow the specified casing.

"always"

It errors on upper case letters.

"never"

It errors on hyphens except on the attributes in the ignored attributes list.

"never", { "ignore": ["custom-prop"] }

Don't use hyphenated name but allow custom attributes

"never", { "ignoreTags": ["/^custom-/"] }

👫 Related Rules

• vue/v-on-event-hyphenation
• vue/prop-name-casing

🚀 Version

This rule was introduced in eslint-plugin-vue v3.9.0

🔍 Implementation

• Rule source
• Test source